Kit Solution
Main Site Page :
Main page is the actual view of website application built. It comprises a dictionary with phonetic feature embedded in it to help the children in the remote areas to learn new words with meanings and proper pronunciation. It would be a great confidence booster as many children in remote areas feel being lagged in English vocabulary and pronunciation.
Also the main site consists of few fun activities that helps the children learn the language in a more efficient and interesting way. Learning by activities has benefits like :
* Increases A Child's Memory Capacity.
* Skill-Building.
* Computer & Simulation Fluency.
* Helps With Fast Strategic Thinking & Problem-Solving.
* Develops Hand-Eye Coordination.
Tech Stack : API ( Free Dictionary API ) , HTML , CSS , Javascript and Bootstrap
Jumbled Words :
Jumbled words is a basic fun English activity that we would have come across. To make it accessible to the children in remote areas in a more efficient and simple way, this activity was selected. Also this activity would make the children to make more attempts and try to find words in remembering way that would stay in their mind for long.
Tech Stack : Javascript , HTML ,CSS and Bootstrap
Javascript is used for shuffling the characters and for validation of submit button for showing results
Hangman :
Hangman, yes the game that all of us had played for finding movies, songs and what not. So bringing something to children in which they already have interests, would make them more eager to make guesses to find words in English before the game ends is the aim behind adding this activity.
Tech Stack : React , Javascript (Node.js) and CSS
React is used for more detailed functioning of the stickman used and checking of words used
Quiz :
Quiz has been one of the most and best used strategy to engage with children to teach them things in a fun way, so that they grasp it easily. Same has been the thought for addition of this activity to make children in remote areas to learn things in better way, that also checks their performance on a time basis!
Tech Stack : Javascript , HTML , CSS and Bootstrap
Javascript is used here for timer and validation of answers on submission of answers to each questions
Memory Game :
While learning new stuffs, it’s equally important to keep your memory game up! So the existence of this activity here is an indirect attempt to check children’s memory power, by letting them find the same icons with the least number of moves and in the fastest time period possible.
Tech Stack : HTML , CSS and Javascript
Javascript is used for checking the matching icons and randomizing them
Paint :
Well, well, well, painting has always been a part of us in our childhood life and we have till date learned concepts in college through paint and jam-boards in online class. But this opportunity hasn’t been available to everybody, especially to the children in the remote areas. So to make it a part of our work is to bring it to a part of their life
Tech Stack : HTML , CSS and Javascript
Javascript is used here for proper functioning of all the properties (underline , marker , text)
Studento Bot :-
It is student educational chatbot developed in the view of making learning easy by answering questions to your children 24/7.
Tech Stack : Dialogflow to create the chatbot and integration hooks for connecting it with telegram.
To know more about the final outlook of the website check out :- https://github.com/suraj6501/Win-Et-EnactusREC-TFGW/tree/main/ScreenShots
Kit Deployment Instructions
So in order to run the app download the code from Github link given in the Kit Solution
( Note : Do download both the codes from main and master branches)
For the code in Master Branch - Note : (npm must be installed and activated as an environment variable)
1. Use npm install to install all the dependencies
2. Use npm run build to get the build which will be later used for deployment
3. Use npm start to run the app in the local server https://localhost:8000
For the code in Main Branch
1. Unzip the code locate the file index.html and run it on the local host using Open with Chrome
Instructions:-
- If the API is slow , wait for few seconds and the result will be then rendered on the site due to freemium version.
- To view it offline , use add to reading list bar in the chrome or download the whole site either by using github repo or any external chrome sites.
- The extension will be available publicly on chrome store once the payment registration process is done.
- To see the deployment live in action use https://win-et-enactusrec-tfgw.netlify.app/
Deployment :- To deploy use netlify