Day 7: Simple Sentence Builder

About This Project

This application is a Simple Sentence Builder designed to assist individuals, particularly those with aphasia, in practicing the construction of basic sentences. Aphasia can affect the ability to formulate grammatically correct sentences, and this tool provides a structured, low-pressure environment to work on this skill.

The app focuses on the fundamental Subject-Verb-Object (SVO) sentence structure common in English. It uses clear visual separation of word types and provides immediate feedback, helping users understand sentence components and build confidence.

How it Works

1. Word Columns: The screen displays three columns labeled “Who?” (Subjects), “Action” (Verbs), and “What?” (Objects). Each column contains several word options presented as buttons.
2. Select Words: Click one button from each column to choose a subject, verb, and object. The selected button in each column will be highlighted.
3. Sentence Display: As you select words, the sentence display area updates. It shows the constructed sentence once all three parts are selected, or prompts you on which parts are still needed. Complete sentences are highlighted.
4. Read Aloud: Once a sentence is complete, click the “Read Aloud” button to hear the sentence spoken using the browser’s built-in speech synthesis.
5. New Sentence: Click the “New Sentence” button to clear your selections and start building a new sentence.
6. Counter: A counter keeps track of how many complete sentences you have successfully built during the session.

The design uses large, clear buttons and text, making it accessible for users with potential visual or motor challenges.

Creation Process

Create a simple sentence builder app as an MVP for aphasia rehabilitation.

Instructions:
1.  Display three columns of word choices: Subjects ("Who?"), Verbs ("Action"), Objects ("What?").
2.  Use buttons for word selection. Provide 5-10 common words per column.
3.  Users click one word from each column to build a sentence. Highlight selected words.
4.  Display the constructed sentence below the columns. Show prompts if parts are missing.
5.  Include a "New Sentence" button to clear selections.
6.  Include a "Read Aloud" button that uses browser speech synthesis for complete sentences.
7.  Add a counter for completed sentences.
8.  Use basic HTML, CSS, and JavaScript. Ensure large, tappable buttons and clear text.
9.  Make the layout responsive, stacking columns on smaller screens.

- Used standard HTML buttons within flexbox columns for layout.
- Managed state (selected words, sentence count) using simple JavaScript variables.
- Added CSS classes (`.selected`) to visually indicate chosen words.
- Implemented the `SpeechSynthesisUtterance` API for the read-aloud feature.
- Included basic responsive design using a media query to stack columns on mobile.
- Focused on clear visual feedback in the sentence display area.