Commit a3554c04 authored by W.H.M Kasun Sampath's avatar W.H.M Kasun Sampath

Final Project

parent dc6d4ce7
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="f0bdacf7-698f-4afd-a62d-fc48c233d8c2" name="Default Changelist" comment="" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="Python Script" />
</list>
</option>
</component>
<component name="ProjectId" id="1uhlLxov2xRxoYAaK9BaFFkGEtl" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="settings.editor.selected.configurable" value="editor.preferences.fonts.default" />
</component>
<component name="RunManager" selected="Python.train">
<configuration default="true" type="PythonConfigurationType" factoryName="Python">
<module name="CNN" />
<option name="INTERPRETER_OPTIONS" value="" />
<option name="PARENT_ENVS" value="true" />
<envs>
<env name="PYTHONUNBUFFERED" value="1" />
</envs>
<option name="SDK_HOME" value="" />
<option name="WORKING_DIRECTORY" value="" />
<option name="IS_MODULE_SDK" value="false" />
<option name="ADD_CONTENT_ROOTS" value="true" />
<option name="ADD_SOURCE_ROOTS" value="true" />
<EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
<option name="SCRIPT_NAME" value="" />
<option name="PARAMETERS" value="" />
<option name="SHOW_COMMAND_LINE" value="true" />
<option name="EMULATE_TERMINAL" value="false" />
<option name="MODULE_MODE" value="false" />
<option name="REDIRECT_INPUT" value="false" />
<option name="INPUT_FILE" value="" />
<method v="2" />
</configuration>
<configuration name="prepare_dataset" type="PythonConfigurationType" factoryName="Python" temporary="true" nameIsGenerated="true">
<module name="CNN" />
<option name="INTERPRETER_OPTIONS" value="" />
<option name="PARENT_ENVS" value="true" />
<envs>
<env name="PYTHONUNBUFFERED" value="1" />
</envs>
<option name="SDK_HOME" value="" />
<option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
<option name="IS_MODULE_SDK" value="true" />
<option name="ADD_CONTENT_ROOTS" value="true" />
<option name="ADD_SOURCE_ROOTS" value="true" />
<EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
<option name="SCRIPT_NAME" value="$PROJECT_DIR$/prepare_dataset.py" />
<option name="PARAMETERS" value="" />
<option name="SHOW_COMMAND_LINE" value="false" />
<option name="EMULATE_TERMINAL" value="false" />
<option name="MODULE_MODE" value="false" />
<option name="REDIRECT_INPUT" value="false" />
<option name="INPUT_FILE" value="" />
<method v="2" />
</configuration>
<configuration name="test" type="PythonConfigurationType" factoryName="Python" temporary="true" nameIsGenerated="true">
<module name="CNN" />
<option name="INTERPRETER_OPTIONS" value="" />
<option name="PARENT_ENVS" value="true" />
<envs>
<env name="PYTHONUNBUFFERED" value="1" />
</envs>
<option name="SDK_HOME" value="" />
<option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
<option name="IS_MODULE_SDK" value="true" />
<option name="ADD_CONTENT_ROOTS" value="true" />
<option name="ADD_SOURCE_ROOTS" value="true" />
<EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
<option name="SCRIPT_NAME" value="$PROJECT_DIR$/test.py" />
<option name="PARAMETERS" value="" />
<option name="SHOW_COMMAND_LINE" value="true" />
<option name="EMULATE_TERMINAL" value="false" />
<option name="MODULE_MODE" value="false" />
<option name="REDIRECT_INPUT" value="false" />
<option name="INPUT_FILE" value="" />
<method v="2" />
</configuration>
<configuration name="train" type="PythonConfigurationType" factoryName="Python" temporary="true" nameIsGenerated="true">
<module name="CNN" />
<option name="INTERPRETER_OPTIONS" value="" />
<option name="PARENT_ENVS" value="true" />
<envs>
<env name="PYTHONUNBUFFERED" value="1" />
</envs>
<option name="SDK_HOME" value="" />
<option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
<option name="IS_MODULE_SDK" value="true" />
<option name="ADD_CONTENT_ROOTS" value="true" />
<option name="ADD_SOURCE_ROOTS" value="true" />
<EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
<option name="SCRIPT_NAME" value="$PROJECT_DIR$/train.py" />
<option name="PARAMETERS" value="" />
<option name="SHOW_COMMAND_LINE" value="false" />
<option name="EMULATE_TERMINAL" value="false" />
<option name="MODULE_MODE" value="false" />
<option name="REDIRECT_INPUT" value="false" />
<option name="INPUT_FILE" value="" />
<method v="2" />
</configuration>
<recent_temporary>
<list>
<item itemvalue="Python.train" />
<item itemvalue="Python.prepare_dataset" />
<item itemvalue="Python.test" />
</list>
</recent_temporary>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="f0bdacf7-698f-4afd-a62d-fc48c233d8c2" name="Default Changelist" comment="" />
<created>1625125649454</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1625125649454</updated>
<workItem from="1625125650607" duration="2786000" />
<workItem from="1625136350571" duration="2538000" />
<workItem from="1625199940365" duration="2484000" />
<workItem from="1625215533135" duration="3702000" />
<workItem from="1625225454923" duration="822000" />
<workItem from="1625227158105" duration="3413000" />
<workItem from="1625233722169" duration="2141000" />
<workItem from="1625235914364" duration="2053000" />
<workItem from="1625238978838" duration="2373000" />
<workItem from="1625277592206" duration="880000" />
<workItem from="1625279974099" duration="940000" />
<workItem from="1625282581731" duration="5954000" />
<workItem from="1625290235704" duration="6379000" />
<workItem from="1625366292780" duration="1145000" />
<workItem from="1625375024100" duration="7825000" />
</task>
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
<component name="com.intellij.coverage.CoverageDataManagerImpl">
<SUITE FILE_PATH="coverage/CNN$prepare_dataset.coverage" NAME="prepare_dataset Coverage Results" MODIFIED="1625290254578" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$" />
<SUITE FILE_PATH="coverage/CNN$train.coverage" NAME="train Coverage Results" MODIFIED="1625397203062" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="true" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$" />
</component>
</project>
\ No newline at end of file
{
"mapping": [],
"labels": [],
"MFCCs": [],
"files": []
}
\ No newline at end of file
File deleted
This diff is collapsed.
{
"name": "smarties",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/lab": "^4.0.0-alpha.60",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@workday/canvas-kit-react-text-input": "^4.8.1",
"chart.js": "^3.5.1",
"material-ui": "^0.20.2",
"ml5": "0.1.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-canvas-draw": "^1.1.1",
"react-chartjs-2": "^3.0.5",
"react-dom": "^17.0.2",
"react-hook-speech-to-text": "^0.7.0",
"react-horizontal-timeline": "^1.5.3",
"react-modal-video": "^1.2.8",
"react-scripts": "4.0.3",
"react-signature-canvas": "^1.0.3",
"react-simple-chatbot": "^0.6.1",
"react-speech-recognition": "^3.8.2",
"react-toastify": "^8.0.3",
"styled-components": "^5.3.0",
"tesseract.js": "^1.0.14",
"tesseract.ts": "^1.1.2",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"json-loader": "^0.5.7",
"react-router-dom": "^5.2.0"
}
}
import librosa
import os
import json
DATASET_PATH = "dataset"
JSON_PATH = "data.json"
SAMPLES_TO_CONSIDER = 22050 # 1 sec. of audio
def preprocess_dataset(dataset_path, json_path, num_mfcc=13, n_fft=2048, hop_length=512):
# dictionary where we'll store mapping, labels, MFCCs and filenames
data = {
"mapping": [],
"labels": [],
"MFCCs": [],
"files": []
}
# loop through all sub-dirs
for i, (dirpath, dirnames, filenames) in enumerate(os.walk(dataset_path)):
# ensure we're at sub-folder level
if dirpath is not dataset_path:
# save label (i.e., sub-folder name) in the mapping
label = dirpath.split("/")[-1]
data["mapping"].append(label)
print("\nProcessing: '{}'".format(label))
# process all audio files in sub-dir and store MFCCs
for f in filenames:
file_path = os.path.join(dirpath, f)
# load audio file and slice it to ensure length consistency among different files
signal, sample_rate = librosa.load(file_path)
# drop audio files with less than pre-decided number of samples
if len(signal) >= SAMPLES_TO_CONSIDER:
# ensure consistency of the length of the signal
signal = signal[:SAMPLES_TO_CONSIDER]
# extract MFCCs
MFCCs = librosa.feature.mfcc(signal, sample_rate, n_mfcc=num_mfcc, n_fft=n_fft,
hop_length=hop_length)
# store data for analysed track
data["MFCCs"].append(MFCCs.T.tolist())
data["labels"].append(i-1)
data["files"].append(file_path)
print("{}: {}".format(file_path, i-1))
# save data in json file
with open(json_path, "w") as fp:
json.dump(data, fp, indent=4)
if __name__ == "__main__":
preprocess_dataset(DATASET_PATH, JSON_PATH)
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import './App.css';
import React from 'react';
import {useState} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import PrivateRoute from '../src/pages/component/PrivateRoute';
import MainLayout from "./layouts/MainLayout";
import Login from './pages/Login';
import SignUp from "./pages/SignUp";
import IndividualIntro from "./pages/IndividualIntro";
import Timelines from "./pages/timeline";
import Draw from "./pages/component/draw";
import Grade from "./pages/Grade.js";
import Home from "./pages/Home";
import KinderArt from "./pages/KiderArt"
import LetStart from "./pages/component/LetStart";
import Progress from "./pages/Progress";
import ReportKinderArt from "./pages/ReportKinderArt";
import ReportMath from "./pages/ReportMath"
import ReportSpeak from "./pages/ReportSpeak";
import Talk from "./pages/Talk";
import PlayWithMath from './pages/PlayWithMath'
import AdditionSelect from "./pages/AdditionSelect";
import DrawFruitTimeline from './pages/DrawFruitsTimeline'
import Identification from './pages/identification';
import NumberIdentify from './pages/NumberIdentify';
import Pronunciation from './pages/Pronunciation'
import Chat from './pages/ChatBot'
import Chips from './pages/check'
import ChatEnter from "./pages/ChatEnter";
import {MathMarksContext} from './Context/MathMarks'
import {TalkMarksContext} from './Context/TalkMarks'
import {DrawMarksContext} from "./Context/DrawMarks";
function App() {
const[mathMarks,setMathMarks] = useState([0,0,0,0,0,0]);
const[talkMarks,setTalkMarks] = useState([0,0,0,0,0,0]);
const[drawMarks,setDrawMarks] = useState([0,0,0]);
return (
<MathMarksContext.Provider value={[mathMarks,setMathMarks]}>
<TalkMarksContext.Provider value={[talkMarks,setTalkMarks]}>
<DrawMarksContext.Provider value={[drawMarks,setDrawMarks]}>
<BrowserRouter>
<MainLayout>
<Switch>
<Route exact path='/' component={Login}/>
<Route exact path='/login' component={Login}/>
<Route exact path='/signup' component={SignUp}/>
<PrivateRoute exact path='/individualIntro' component={IndividualIntro}/>
<PrivateRoute exact path='/timeline' component={Timelines}/>
<PrivateRoute exact path='/draw' component={Draw}/>
<PrivateRoute exact path='/home' component={Home}/>
<PrivateRoute exact path='/kinderArt' component={KinderArt}/>
<PrivateRoute exact path='/letStart' component={LetStart}/>
<PrivateRoute exact path='/progress' component={Progress}/>
<PrivateRoute exact path='/reportKinderArt' component={ReportKinderArt}/>
<PrivateRoute exact path='/reportMath' component={ReportMath}/>
<PrivateRoute exact path='/reportSpeak' component={ReportSpeak}/>
<PrivateRoute exact path='/talk' component={Talk}/>
<PrivateRoute exact path='/selectGrade' component={Grade}/>
<PrivateRoute exact path='/playWithMath' component={PlayWithMath}/>
<PrivateRoute exact path='/additionSelect' component={AdditionSelect}/>
<PrivateRoute exact path='/drawFruitTimeline' component={DrawFruitTimeline}/>
<PrivateRoute exact path='/identification' component={Identification}/>
<PrivateRoute exact path='/numberIdentify' component={NumberIdentify}/>
<PrivateRoute exact path='/pronunciation' component={Pronunciation}/>
<PrivateRoute exact path='/chips' component={Chips}/>
<PrivateRoute exact path='/chat' component={Chat}/>
<PrivateRoute exact path='/chatEnter' component={ChatEnter}/>
</Switch>
</MainLayout>
</BrowserRouter>
</DrawMarksContext.Provider>
</TalkMarksContext.Provider>
</MathMarksContext.Provider>
);
}
export default App;
import {render, screen} from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App/>);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
import { createContext } from 'react';
export const AuthContext = createContext(0);
\ No newline at end of file
import { createContext } from 'react';
export const DrawMarksContext = createContext([0,0,0]); //[level,correct,total]
\ No newline at end of file
import { createContext } from 'react';
export const MathMarksContext = createContext([0,0,0,0,0,0]); //[addition level,addition correct,addition total,numberid level,number idi correct,total]
\ No newline at end of file
import { createContext } from 'react';
export const SelectionMarksContext = createContext(0);
\ No newline at end of file
import { createContext } from 'react';
export const TalkMarksContext = createContext([0,0,0,0,0,0]); //[Identification level,Identification correct,Identification total,Pronunciation level,Pronunciation correct,Pronunciation total]
\ No newline at end of file
import { createContext } from 'react';
export const TotalAdditionContext = createContext(0);
\ No newline at end of file
@font-face {
font-family: "Jokerman";
src: url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.eot");
src: url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.woff") format("woff"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/eec0608ff80827a878d7da11b3b71857.svg#Jokerman") format("svg");
}
\ No newline at end of file
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
This diff is collapsed.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
This diff is collapsed.
import React from 'react';
import ChatBot from 'react-simple-chatbot';
import {ThemeProvider} from 'styled-components'
import themeX from '../theme/index'
import {Grid} from '@material-ui/core';
import bg from "../images/bg.jpeg";
import ChartMath from './component/ChartMath'
import ChartKiderArt from "./component/ChartKiderArt";
import ChartSpeak from "./component/ChartSpeak";
const theme = {
background: 'transparent',
fontFamily: 'Comic Sans MS',
headerBgColor: themeX.palette.primary.main,
headerFontColor: '#fff',
headerFontSize: '35px',
botBubbleColor: 'transparent',
botFontColor: '#000',
userBubbleColor: '#fff',
userFontColor: '#4a4a4a',
};
class Chat extends React.Component {
render() {
return (
<container>
<Grid style={{
backgroundImage: `url(${bg})`,
backgroundOverlay: "black",
width: "85%",
backgroundPosition: "center",
backgroundSize: "100%"
}}>
<Grid style={{justifyContent: 'center', backgroundColor: "rgba(255, 255, 255, 0.85)",}}>
<ThemeProvider theme={theme}>
<ChatBot style={{botFontColor: 'red'}}
steps={[
{
id: '1',
message: 'What is your name?',
trigger: '2',
},
{
id: '2',
user: true,
trigger: '3',
},
{
id: '3',
message: 'Hi {previousValue}, what would you like to know?',
trigger: '4',
},
{
id: '4',
options: [
{ value: 1, label: 'Report of Play with Math', trigger: '5' },
{ value: 2, label: 'Report of Speak with SMARTE\'s', trigger: '6' },
{ value: 3, label: 'Report of Kinder Art', trigger: '7' },
],
},
// {
// id: '4',
// user: true,
// trigger: '5',
// },
{
id: '5',
component: (
<div> <ChartMath/> </div>
),
trigger: '8',
},
{
id: '6',
component: (
<div> <ChartSpeak/> </div>
),
trigger: '8',
},
{
id: '7',
component: (
<div> <ChartKiderArt/></div>
),
trigger: '8',
},
{
id: '8',
message: 'Do you need more report?',
trigger: '9',
},
{
id: '9',
options: [
{ value: 1, label: 'Yes', trigger: '4' },
{ value: 2, label: 'No', trigger: '10' },
],
},
{
id: '10',
message: 'Do you Require any suggestions to improve?',
trigger: '11',
},
{
id: '11',
options: [
{ value: 1, label: 'Yes', trigger: '12' },
{ value: 2, label: 'No', trigger: '13' },
],
},
// {
// id: '11',
// user: true,
// trigger: '14',
// },
{
id: '12',
message: 'https://www.youtube.com/watch?v=S-PJwUVwoiI',
trigger: '13',
},
{
id: '13',
message: 'Thank You, Bye...',
// trigger: '15',
end:true,
},
]}
/>
</ThemeProvider>
</Grid>
</Grid>
</container>
)
}
}
export default Chat;
import React from 'react';
import ChatBot from 'react-simple-chatbot';
import {ThemeProvider} from 'styled-components'
import themeX from '../theme/index'
import {Button, Grid} from '@material-ui/core';
import bg from "../images/bg.jpeg";
import Typography from '@material-ui/core/Typography';
import bot from '../images/bot.png'
import {useHistory} from "react-router";
const theme = {
background: 'transparent',
fontFamily: 'Comic Sans MS',
headerBgColor: themeX.palette.primary.main,
headerFontColor: '#fff',
headerFontSize: '35px',
botBubbleColor: 'transparent',
botFontColor: '#000',
userBubbleColor: '#fff',
userFontColor: '#4a4a4a',
};
class ChatEnter extends React.Component {
handleClick = e => {
this.props.history.push("/chat");
};
render() {
return (
<container>
<Grid container style={{
backgroundImage: `url(${bg})`,
backgroundOverlay: "black",
width: "85%",
backgroundPosition: "center",
backgroundSize: "100%"
}}>
<Grid container style={{justifyContent: 'center', backgroundColor: "rgba(255, 255, 255, 0.85)",}}>
<Grid container item style={{justifyContent: 'center'}}>
<Grid container item style={{
height: 520,
width: 350,
border: "1px solid black",
borderRadius: 10,
paddingBottom: 50
}}>
<Grid container item style={{
height: 56,
backgroundColor: themeX.palette.primary.main,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
justifyContent: 'center'
}}>
<Typography variant='h5' style={{
fontFamily: 'Comic Sans MS',
color: 'white',
fontWeight: 'bold',
paddingTop: 16
}}>
Welcome to ChatBot
</Typography>
</Grid>
<Grid container item style={{justifyContent: 'center'}}>
<Grid item md={3}></Grid>
<Grid item md={6}>
<Typography variant="h3" style={{fontFamily: 'Comic Sans MS'}}>
Hello
</Typography>
</Grid>
<Grid item md={3}></Grid>
<Grid item md={3}></Grid>
<Grid item md={6}>
<Typography variant="h5" style={{fontFamily: 'Comic Sans MS'}}>
<Typography variant="h6" lign="center"
style={{fontFamily: 'Comic Sans MS'}}>
I'm Chatty
</Typography>
</Typography>
</Grid>
<Grid item md={3}></Grid>
<Grid container item>
<Grid item md={3}></Grid>
<Grid item md={6} style={{justifyContent: 'center'}}>
<img align='center' src={bot} style={{height: 100, width: 100}}/>
</Grid>
<Grid item md={3}></Grid>
</Grid>
<Grid item>
<Typography variant="h5" lign="center" style={{fontFamily: 'Comic Sans MS'}}>
<Typography variant="h6" lign="center"
style={{fontFamily: 'Comic Sans MS'}}>
How can I help you?
</Typography>
</Typography>
</Grid>
<Grid item>
<Typography variant="h5" style={{fontFamily: 'Comic Sans MS'}}>
<Button variant="h6"
onClick={this.handleClick}
style={{fontFamily: 'Comic Sans MS', border: "1px solid black"}}>
I want to know...
</Button>
</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
)
}
}
export default ChatEnter;
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import {useHistory} from "react-router";
import bg from '../images/bg.jpeg'
export default function Home() {
let history = useHistory()
return (
<container >
<Grid container style={{backgroundImage: `url(${bg})`,backgroundOverlay:"black",width:"85%",backgroundPosition:"center",backgroundSize:"100%"}}>
<Grid container item style={{backgroundColor:"rgba(255, 255, 255, 0.7)",height:500}} >
<Grid container item>
<Grid container md={3}>
</Grid>
<Grid item md={6}>
<Grid item style={{width:"100%",justifyContent:"center",paddingBottom:0}}>
<Typography align="center" style={{ maxWidth: "100%",margin:15,opacity:0.6 ,fontFamily:"Comic Sans MS",fontStyle:"italic", fontSize:35}} >Join Smarties</Typography>
</Grid>
<Grid item style={{paddingTop:35,width:"100%",justifyContent:"center",paddingBottom:0}}>
<Button onClick={
() => {
history.push({
pathname: '/home',
})
}
} align="center" style={{borderRadius:0, width: "80%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",padding:15,fontSize:30,margin:5,backgroundColor:"#1986aa",opacity:0.6}} >Grade 1</Button>
<Button onClick={
() => {
history.push({
pathname: '/home',
})
}
} align="center" style={{ borderRadius:0, width: "80%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",padding:15,fontSize:30,margin:5,backgroundColor:"#1986aa",opacity:0.6}} >Grade 2</Button>
<Button onClick={
() => {
history.push({
pathname: '/home',
})
}
} align="center" style={{ borderRadius:0, width: "80%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",padding:15,fontSize:30,margin:5,backgroundColor:"#1986aa",opacity:0.6}} >Grade 3</Button>
</Grid>
</Grid>
<Grid container md={3}>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
);
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import {makeStyles} from '@material-ui/core/styles';
import {Link} from 'react-router-dom';
// import {AlertSnack} from '../pages/component';
// import {AuthContext} from '../context/AuthContext';
import mainImag from "../images/mainImag.jpg"
import slogo from "../images/slogo.png"
import CssBaseline from "@material-ui/core/CssBaseline";
import Avatar from "@material-ui/core/Avatar";
import LockOpenOutlined from "@material-ui/icons/LockOpenOutlined";
import TextField from "@material-ui/core/TextField";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import themeX from "../theme";
import {useHistory} from "react-router";
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1
},
menuButton: {
marginRight: theme.spacing(2)
},
title: {
flexGrow: 1
},
headerBar: {
display: 'flex',
marginTop: '6rem'
},
main: {
display: 'flex',
minHeight: window.innerHeight
}
}));
export default function Home() {
const classes = useStyles();
let history = useHistory()
return (
<container>
<Grid item>
<Grid container item>
<Grid container item style={{justifyContent: 'center', height: "100%"}}>
<Grid item md={6}>
<img style={{padding: 5, margin: 2, maxWidth: "100%", opacity: 0.8}} src={mainImag}></img>
</Grid>
<Grid container item md={6} style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%", maxHeight: "15%", opacity: 0.6}}
src={slogo}></img>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 0}}>
<Typography align="center"
style={{maxWidth: "60%", margin: 15, opacity: 0.6, fontSize: 20}}>A smart
way to recommend primary student(Grade 1-3) course using their skills.</Typography>
</Grid>
<Grid item
style={{paddingTop: 35, width: "100%", justifyContent: "center", paddingBottom: 0}}>
<Grid container item md={3}></Grid>
<Grid container item md={6}>
<Button
onClick={
() => {
history.push('/kinderArt')
}
}
align="center" style={{
borderRadius: 0,
maxWidth: "100%",
fontFamily: "papyrus",
color: "white",
fontWeight: "bold",
width: '100%',
paddingTop: 20,
paddingBottom: 20,
marginBottom: 10,
backgroundColor: "#1986aa"
}}>Kinder Art</Button>
<Button
onClick={
() => {
history.push('/playWithMath')
}
}
align="center" style={{
borderRadius: 0,
maxWidth: "100%",
fontFamily: "papyrus",
color: "white",
fontWeight: "bold",
width: '100%',
paddingTop: 20,
paddingBottom: 20,
marginBottom: 10,
backgroundColor: "#1986aa"
}}>Play With Math</Button>
<Button
onClick={
() => {
history.push('/talk')
}
}
align="center" style={{
borderRadius: 0,
maxWidth: "100%",
fontFamily: "papyrus",
color: "white",
fontWeight: "bold",
width: '100%',
paddingTop: 20,
paddingBottom: 20,
backgroundColor: "#1986aa"
}}>Talk With Smarti'es</Button>
</Grid>
<Grid container item md={3}></Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
);
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import individualIntro1 from "../images/individualIntro1.png"
import individualIntro2 from "../images/individualIntro2.png"
import individualIntro3 from "../images/individualIntro3.png"
import Image from "../images/individualIntroBg.png";
const IndividualIntro = ({children}) => {
return (
<container>
<Grid container item style={{backgroundImage: `url(${Image})`,
backgroundPosition: 'center',backgroundSize:"60%",backgroundRepeat : 'no-repeat',}}>
<Grid container item style={{justifyContent: 'center',backgroundColor:"rgba(255, 255, 255, 0.6)",}}>
<Typography style={{margin:50,fontSize:30,fontFamily: "papyrus",
fontWeight: "bold",}} >
Start Here
</Typography>
<Grid container item >
<Grid container item style={{marginLeft:40,marginRight:40}}>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro1}/>
</Grid>
<Grid container item md={3} >
</Grid>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro3}/>
</Grid>
<Grid container item md={3}>
</Grid>
</Grid>
<Grid container item >
<Grid container item md={3}>
</Grid>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro2}/>
</Grid>
<Grid container item md={3} >
</Grid>
<Grid container style={{height:200}} item md={3} >
<img style={{height:200, border: "1px solid black"}} src={individualIntro2}/>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</container>
);
};
export default IndividualIntro;
\ No newline at end of file
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import mainImag from "../images/mainImag.jpg"
import themeX from "../theme";
export default function LetStart(){
return(
<Container>
<Grid item>
<Grid container item>
<Grid container md={6}>
<img style={{padding:5,margin:2,maxWidth: "100%",opacity:0.8}} src={mainImag}></img>
</Grid>
<Grid container md={6} >
<Grid container item style={{width:"100%",height:"10%",justifyContent:"center" , paddingTop:150}}>
<Button align="center" style={{ maxWidth: "100%",fontFamily:"Comic Sans MS",fontStyle:"italic",color:"white",borderRadius:0,paddingLeft:100,paddingBottom:30,paddingTop:30,paddingRight:100,fontSize:30,margin:15,backgroundColor:themeX.palette.primary.main}} >Let's Start</Button>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOpenOutlined from '@material-ui/icons/LockOpenOutlined';
import Typography from '@material-ui/core/Typography';
import {makeStyles} from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import themeX from "../theme/index"
import bg from "../images/bg.jpeg"
import '../fonts/index.css'
import {useHistory} from "react-router";
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(6),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(3),
backgroundColor: themeX.palette.primary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function Login() {
const classes = useStyles();
let history = useHistory()
return (
<Container style={{justifyContent: 'center', height: "100%",}} component="main">
<CssBaseline/>
<Grid item container style={{
backgroundImage: `url(${bg})`, backgroundHeight: 300, backgroundOverlay: "black",
backgroundPosition: 'center', backgroundSize: 'cover'
}}>
<Grid item container style={{backgroundColor: "rgba(255, 255, 255, 0.8)",}}>
<Grid container md={3}>
</Grid>
<Grid container md={6}>
<Grid item style={{padding: 20}}>
<Typography style={{
fontFamily: "papyrus",
fontWeight: "bold",
fontSize: "30px",
margin: 40
}}> SignIn</Typography>
<Avatar fontSize="large" className={classes.avatar}>
<LockOpenOutlined/>
</Avatar>
<hr align="center" style={{width: "50%",}}/>
<form className={classes.form} noValidate>
<TextField
color="white"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
borderColor="black"
/>
<FormControlLabel
control={<Checkbox value="remember" style={{color: themeX.palette.primary.main}}/>}
label="Remember me"
/>
<Button
type="submit"
fullWidth
color="white"
variant="contained"
style={{
backgroundColor: themeX.palette.primary.main,
color: "white",
fontFamily: 'jokerman-regular, sans-serif'
}}
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item md={6} justifyContent="left"
>
<Link onClick={
() => {
history.push('/signup')
}
} variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item md={6}>
<Link onClick={
() => {
history.push('/signup')
}
} variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</Grid>
</Grid>
<Grid container md={3}>
</Grid>
</Grid>
</Grid>
</Container>
);
}
\ No newline at end of file
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import NumberIdentification from "../images/Numbers.png"
import Addition from "../images/Addition.png"
import {useHistory} from "react-router";
import bg from "../images/bg.jpeg";
export default function PlayWithMath() {
let history = useHistory()
return (
<Container>
<Grid container item style={{
backgroundImage: `url(${bg})`,
backgroundOverlay: "black",
width: "85%",
backgroundPosition: "center",
backgroundSize: "100%"
}}>
<Grid container item style={{backgroundColor: "rgba(255, 255, 255, 0.8)", justifyContent: "center"}}>
<Typography style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Start Here</Typography>
<Grid item container style={{paddingTop: 40}}>
<Grid container onClick={
() => {
history.push({
pathname: '/letStart',
state: {detail: '/numberIdentify'}
})
}
} item style={{justifyContent: "center"}} md={6}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 20, maxWidth: "50%"}} src={NumberIdentification}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Number Identification</Typography>
</Grid>
<Grid container onClick={
() => {
history.push({
pathname: '/letStart',
state: {detail: '/additionSelect'}
})
}
} item style={{justifyContent: "center"}} md={6}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 20, maxWidth: "50%"}} src={Addition}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Addition</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import Drawing from "../images/Drawing.png";
import speaking from "../images/speaking.png"
import math from "../images/math.png"
import {useHistory} from "react-router";
import bg from "../images/bg.jpeg";
export default function Progress() {
let history = useHistory()
return (
<Container>
<Grid container item style={{
backgroundImage: `url(${bg})`,
backgroundOverlay: "black",
width: "85%",
backgroundPosition: "center",
backgroundSize: "100%"
}}>
<Grid container style={{
width: "100%",
justifyContent: "center",
paddingBottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.8)"
}} item>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 0}}>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
paddingBottom: 90,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Start Here</Typography>
</Grid>
<Grid item container style={{paddingTop: 40}}>
<Grid container onClick={
() => {
history.push({
pathname: '/reportKinderArt',
})
}
} item style={{justifyContent: "center"}} md={4}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%"}} src={Drawing}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Kinder Art</Typography>
</Grid>
<Grid container onClick={
() => {
history.push({
pathname: '/reportSpeak',
})
}
} item style={{justifyContent: "center"}} md={4}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%"}} src={speaking}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Talk with Smart'es</Typography>
</Grid>
<Grid container onClick={
() => {
history.push({
pathname: '/reportMath',
})
}
} item style={{justifyContent: "center"}} md={4}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%"}} src={math}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Play with math</Typography>
</Grid>
</Grid>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import {DrawMarksContext} from "../Context/DrawMarks";
export default function ReportKinderArt() {
const[drawMarks,setDrawMarks] = useContext(DrawMarksContext)
return (
<Container>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 50}}>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Report of Kinder Art</Typography>
</Grid>
<Grid container md={10}>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Activity</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Level</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Correct</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Total</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Draw Fruits</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{Math.floor(drawMarks[0]/5)+1}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{drawMarks[1]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{drawMarks[2]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Draw Animals</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>1</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>0</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>0</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Draw Shapes</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>1</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>0</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>0</Typography>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import {MathMarksContext} from '../Context/MathMarks'
export default function ReportMath() {
const[mathMarks,setMathMarks] = useContext(MathMarksContext)
return (
<Container>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 50}}>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Report of Play with Math</Typography>
</Grid>
<Grid container md={10}>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Activity</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Level</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Correct</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Total</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 7,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Number Identification</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{Math.floor(mathMarks[3]/5)+1}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{mathMarks[4]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{mathMarks[5]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Addition</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{Math.floor(mathMarks[0]/5)+1}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{mathMarks[1]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{mathMarks[2]}</Typography>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import {TalkMarksContext} from "../Context/TalkMarks";
export default function ReportSpeak() {
const[talkMarks,setTalkMarks] = useContext(TalkMarksContext)
return (
<Container>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 50}}>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Report of Speak with SMART'Es</Typography>
</Grid>
<Grid container md={10}>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Activity</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Level</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Correct</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Total</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 7,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Object Identification</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{Math.floor(talkMarks[0]/5)+1}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{talkMarks[1]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{talkMarks[2]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 7,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>Words Pronunciation</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{Math.floor(talkMarks[3]/5)+1}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{talkMarks[4]}</Typography>
</Grid>
<Grid item md={3} style={{justifyContent: "center"}}>
<Typography align="center" style={{
fontFamily: "Comic Sans MS",
fontSize: 25,
padding: 25,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{talkMarks[5]}</Typography>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
This diff is collapsed.
import React, {useContext, useEffect, useState} from 'react';
import {AppBar, Toolbar, Typography, Button, Box, Container, Grid} from '@material-ui/core';
import Object from "../images/Objects.png";
import Pronunciation from "../images/Pronounciation.png"
import {useHistory} from "react-router";
export default function Talk() {
let history = useHistory()
return (
<Container>
<Grid container item style={{width: "100%", justifyContent: "center"}}>
<Typography style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Start Here</Typography>
<Grid item container style={{paddingTop: 20}}>
<Grid onClick={
() => {
history.push({
pathname: '/letStart',
state: {detail: '/identification'}
})
}
} container item style={{justifyContent: "center"}} md={6}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%"}} src={Object}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Object Identification</Typography>
</Grid>
<Grid container onClick={
() => {
history.push({
pathname: '/letStart',
state: {detail: '/pronunciation'}
})
}
} item style={{justifyContent: "center"}} md={6}>
<Grid item style={{justifyContent: "center"}}>
<img style={{padding: 5, margin: 2, maxWidth: "50%"}} src={Pronunciation}></img>
</Grid>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Pronunciation</Typography>
</Grid>
</Grid>
</Grid>
</Container>
)
}
\ No newline at end of file
import React from 'react';
import SpeechRecognition, {useSpeechRecognition} from 'react-speech-recognition';
const Chips = () => {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
return (
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
);
};
export default Chips;
\ No newline at end of file
import React, {useContext,useEffect, useState} from "react";
import crypto from "crypto";
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import {makeStyles} from '@material-ui/core/styles';
import {useIsMobileOrTablet} from "./utils/isMobileOrTablet";
import themeX from "../../theme";
import Button from "@material-ui/core/Button";
import {Popover} from "@material-ui/core";
import {MathMarksContext} from "../../Context/MathMarks"
import ReactDOM from 'react-dom'
import ModalVideo from 'react-modal-video'
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
width: 300,
height: 100,
fontSize: 90
},
},
}));
function Draw(props) {
useEffect(() => {
setX('')
setCurrentValue('')
}, [props])
let [items, setItems] = useState([]);
const isMobOrTab = useIsMobileOrTablet();
const [img, setImg] = useState('')
let saveableCanvas = null;
let check = '';
const [isOpen, setOpen] = useState(false)
function onSave() {
var canvas = document.getElementById("mycanvas");
let id = crypto.randomBytes(4);
setImg(saveableCanvas.getSaveData())
localStorage.setItem("savedDrawing-" + id, img);
items.push(id);
setItems(items);
saveableCanvas.clear();
}
const classes = useStyles();
const [x, setX] = useState("")
const [currentValue, setCurrentValue] = useState('')
//popup msg
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
if(currentValue == props.correctAns){
setAnchorEl(event.currentTarget);
setMathMarks([mathMarks[0],(mathMarks[1]+1),(mathMarks[2]+1),mathMarks[3],mathMarks[4],mathMarks[5]])
}else{
setOpen(true)
setMathMarks([mathMarks[0],mathMarks[1],(mathMarks[2]+1),mathMarks[3],mathMarks[4],mathMarks[5]])
}
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popover' : undefined;
const [mathMarks,setMathMarks] = useContext(MathMarksContext)
return (
<container>
<Grid container>
<Grid item style={{width: "100%", justifyContent: "center", paddingBottom: 0}}>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}>Addition</Typography>
</Grid>
<Grid container item>
<Typography align="center" style={{
maxWidth: "100%",
margin: 15,
opacity: 0.6,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 35
}}
>{props.head}</Typography>
</Grid>
<Grid container item>
<Grid container item md={2}></Grid>
<Grid container item md={5}>
<Typography align="center"
style={{
fontFamily: "Comic Sans MS",
fontSize: 100,
margin: 1,
opacity: 0.6
}}>{props.a1} +
{props.a2} &nbsp; = </Typography>
</Grid>
<Grid container item md={4} style={{justifyContent: 'left', paddingBottom: 40, paddingTop: 20}}>
<TextField value={currentValue} onDrop={(event) => {
var data = event.dataTransfer.getData("Text");
setCurrentValue(data)
}} aria-dropeffect={true} style={{fontFamily: "Comic Sans MS", margin: 1, opacity: 0.8}}
className={classes.root} id="filled-basic" variant="filled"/>
</Grid>
<Grid container item md={1} style={{justifyContent: 'left', paddingBottom: 60, paddingTop: 40}}>
<div>
<Button aria-describedby={id} variant="contained" color="primary" onClick={handleClick}
style={{color: 'white', backgroundColor: themeX.palette.primary.main}}>
Check
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
anchorReference="anchorPosition"
anchorPosition={{top: 300, left: 800}}
anchorOrigin={{
vertical: 'center',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
onClose={handleClose}
>
<Typography style={{
maxWidth: "100%",
margin: 15,
fontFamily: "Comic Sans MS",
fontStyle: "italic",
fontSize: 50
}}>Correct Answer</Typography>
</Popover>
<ModalVideo style={{width: '100%'}} channel='youtube' autoplay isOpen={isOpen} videoId={props.youtube} onClose={() => setOpen(false)} />
</div>
</Grid>
</Grid>
<Grid container item>
<Grid container item md={4}></Grid>
<Grid container item md={5}>
{props.ans.map((x) => {
return (
<Grid item md={2} style={{justifyContent: "center"}}>
<Typography onDragStart={(event) => {
event.dataTransfer.setData("Text", event.target.id);
}} draggable={true} id={x} align="center" value='4' style={{
fontFamily: "Comic Sans MS",
fontSize: 60,
margin: 2,
border: "1px solid black",
opacity: 0.6
}}>{x}</Typography>
</Grid>
)
})}
</Grid>
</Grid>
</Grid>
</container>
);
}
export default Draw
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment