Add Phonics Vocabulary practice component and update CSP configuration.#581
Open
suresh6602 wants to merge 1 commit intoSunbird-ALL:all-2.5.1from
Open
Add Phonics Vocabulary practice component and update CSP configuration.#581suresh6602 wants to merge 1 commit intoSunbird-ALL:all-2.5.1from
suresh6602 wants to merge 1 commit intoSunbird-ALL:all-2.5.1from
Conversation
…ex.js and public/index.html file
Contributor
WalkthroughThis pull request introduces a comprehensive phonics and vocabulary practice module with multilingual support (English and Tamil), interactive learning components, speech synthesis integration, and a celebration overlay. The implementation adds new UI components, data structures, hooks, styling updates, and configuration adjustments while integrating the module into the existing Practice view. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PhonicsVocabulary as PhonicsVocabulary<br/>(Main Component)
participant Header
participant Card
participant AlphabetStrip
participant useSpeech as useSpeech Hook
participant Celebration
User->>PhonicsVocabulary: Load with lang/category
PhonicsVocabulary->>Header: Render with mode/category
PhonicsVocabulary->>AlphabetStrip: Render available letters
PhonicsVocabulary->>PhonicsVocabulary: Load phonics data (en/ta)
PhonicsVocabulary->>Card: Render visible items (grid)
User->>Card: Click to interact
Card->>useSpeech: playSpeech(text, language)
useSpeech->>useSpeech: Select voice (ta-IN/en-IN)
useSpeech-->>Card: isSpeaking=true
Card->>Card: onComplete triggered
PhonicsVocabulary->>PhonicsVocabulary: Add to completedLetters
PhonicsVocabulary->>AlphabetStrip: Update completion state
User->>Header: Toggle mode or category
PhonicsVocabulary->>PhonicsVocabulary: Reset state, reload data
PhonicsVocabulary->>Card: Re-render with new data
User->>Card: Complete last item
PhonicsVocabulary->>PhonicsVocabulary: Check all completed
PhonicsVocabulary->>Celebration: Render overlay
Celebration->>Celebration: Start confetti animation
User->>Celebration: Click "Play Again"
Celebration->>PhonicsVocabulary: onReset callback
PhonicsVocabulary->>PhonicsVocabulary: Reset completedLetters
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Free ⛔ Files ignored due to path filters (28)
📒 Files selected for processing (15)
Note 🎁 Summarized by CodeRabbit FreeYour organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login. Comment |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR introduces a new Phonics Vocabulary practice component, adds supporting asset structure for images, and updates the Content Security Policy (CSP) configuration in both runtime and static entry points. The Practice view is updated to include the new component, with existing Level 1 logic temporarily commented for testing purposes.
🗂️ Folder Structure Updates
Added:
assets/Phonics_Vocabulary_images/
→ Used to store all Phonics Vocabulary–related images.
Added:
src/components/Practice/Phonics_Vocabulary/
→ Contains all logic and helper functions related to the Phonics Vocabulary practice flow.
🧩 Practice View Integration
→Imported the new Phonics_Vocabulary component in:
src/views/Practice/practice.jsx
→Temporarily commented the existing Level 1 extension logic around line ~5841 for testing and validation purposes.
🔐 Security (CSP Updates)
→Updated Content Security Policy (CSP) configuration in:
src/index.js
public/index.html
Summary by CodeRabbit
Release Notes
New Features
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.