Skip to content

2
2022-073
Commit c9510fad authored by Adithya Kahawanugoda's avatar Adithya Kahawanugoda
Browse files
Options

Merge branch 'master' into 'arithmetic-activity-fiix' 

# Conflicts:
#   web-app/backend/server.py
parents fc791a00 c9a9bb46
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 832 additions and 575 deletions
web-app/backend/knowledgeIqScoreCalculation.py
View file @ c9510fad
import difflib
import re
colourNumbers = [ "5 4","5 6 7","5 6 7 8"]
colourNumbers = [ "3", "21", "29", "83", "184", "2567", "15684"]
digitSpan = [ "5 4","5 6 7","5 6 7 8"]
digitSpan = [ "27", "386", "6251", "86237", "382157"]
def calKnowledgeIqActivityScore(activity, questionIndex, prediction):
questionIndex = int(questionIndex)
prediction = "".join(prediction).replace(".","")
string1 = "".join(prediction)
string2 = re.findall('\d+', string1)
prediction = "".join(string2).replace(" ", "")
cal_score = []
if (activity == "CN"):
if (activity == "Colour Numbers"):
if (colourNumbers[questionIndex-1] == prediction):
score = 100
......@@ -18,26 +21,26 @@ def calKnowledgeIqActivityScore(activity, questionIndex, prediction):
temp = difflib.SequenceMatcher(None, colourNumbers[questionIndex-1], prediction)
print(temp.get_matching_blocks())
print('Similarity Score: ',temp.ratio())
print('Similarity Score: ', temp.ratio())
cal_score = [score, temp.ratio()*100]
cal_score = [score, temp.ratio()*100, colourNumbers[questionIndex-1], string2]
elif (activity == "DS"):
elif (activity == "Digit Span"):
if (digitSpan[questionIndex-1] == prediction):
score = 100
else:
score = 0
temp = difflib.SequenceMatcher(None, colourNumbers[questionIndex-1], prediction)
temp = difflib.SequenceMatcher(None, digitSpan[questionIndex-1], prediction)
print(temp.get_matching_blocks())
print('Similarity Score: ',temp.ratio())
cal_score = [score, temp.ratio()*100]
cal_score = [score, temp.ratio()*100, digitSpan[questionIndex-1], string2]
else:
cal_score = [0,0]
cal_score = []
print('Score cannot be specified to the activity specified in the system!')
return cal_score
\ No newline at end of file
web-app/backend/server.py
View file @ c9510fad
......@@ -45,24 +45,27 @@ def predictAttention():
file = request.files['file']
testNo = request.form.get('questionIndex')
filename = request.form.get('filename')
activity = request.form.get('attentionttype')
candidateID = request.form.get('candidateID')
if file is None or filename == "":
return jsonify({'error: no file'})
return jsonify({'error: no file'})
file.save("./uploads/"+filename)
destination = directory + r"\uploads\att.mp4"
destination = directory + r"\uploads\att.mp4"
scoreLst = captureImage(destination, 10)
dataDict = {
'low_attention': scoreLst[0],
'mid_attention': scoreLst[1],
'high_attention': scoreLst[2],
}
'low_attention': scoreLst[0],
'mid_attention': scoreLst[1],
'high_attention': scoreLst[2],
}
dataJson.append(dataDict)
dt_string = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
db.db['attentionlevelScore'].insert_one({
"activityName": "Manual_Attention_Test",
"questionIndex": testNo,
"attentionLevelScore": dataDict,
"createdAt":dt_string,
})
"candidateID": candidateID,
"activityName": activity,
"questionIndex": testNo,
"attentionLevelScore": dataDict,
"createdAt": dt_string,
})
print("Prediction02", scoreLst)
print("Prediction", dataDict)
return jsonify(dataJson)
......@@ -108,7 +111,7 @@ def data():
institute = body['institute']
status = body['status']
parent = body['parent']
db.db['users'].insert_one({
"firstName": firstName,
"lastName": lastName,
......@@ -154,15 +157,16 @@ def data():
'age': age,
'residence': residence,
'disorders': disorders,
'email' : email,
'contactNo' : contactNo,
'institute' : institute,
'status' : status,
'parent' : parent
'email': email,
'contactNo': contactNo,
'institute': institute,
'status': status,
'parent': parent
}
dataJson.append(dataDict)
return jsonify(dataJson)
@app.route('/institutes/', methods=['GET'])
@cross_origin()
def data3():
......@@ -371,7 +375,7 @@ def predictShapePattern():
# Reasoning IQ evaluation
@app.route('/predictPictureConcept', methods = ['POST','GET'])
@app.route('/predictPictureConcept', methods=['POST', 'GET'])
@cross_origin()
def predictPictureConcept():
if request.method == 'POST':
......@@ -386,19 +390,20 @@ def predictPictureConcept():
file.save("./"+file.filename)
prediction = transform_audio(file.filename)
activityName = "Picture Concept"
analysis = reasoningIQScoreCalculator(activityName,questionIndex,prediction)
analysis = reasoningIQScoreCalculator(
activityName, questionIndex, prediction)
db.db['reasoningIQScore'].insert_one({
"activityName": activityName,
"candidateID": candidateID,
"questionIndex": questionIndex,
"transcription": prediction,
"score":analysis[0],
"expectedAnswer":analysis[1]
"score": analysis[0],
"expectedAnswer": analysis[1]
})
return jsonify({"msg": "Prediction completed"})
except:
return jsonify({"error": "Error during pipeline execution"})
@app.route('/predictArithmetic', methods=['POST', 'GET'])
@cross_origin()
......@@ -428,6 +433,8 @@ def predictArithmetic():
except:
return jsonify({"error": "Error during pipeline execution"})
# Mental Chronometry data management
@app.route('/mentalChromScores', methods=['POST'])
@cross_origin()
......@@ -442,7 +449,7 @@ def mentalChromScores():
totalTime = body['totalTime']
candidateID = body['candidateID']
answerImage = body['answerImage']
# db.users.insert_one({
db.db['mentalChronomrtryScore'].insert_one({
"activityName": activityName,
"score": score,
......@@ -457,9 +464,39 @@ def mentalChromScores():
'status': 'MentalCrom scores are added to the system successfully!',
})
# Knowledge IQ evaluation
@app.route('/mentalChronometryScores/', methods=['GET'])
@cross_origin()
def getMentalChromScores():
allData = db.db['mentalChronomrtryScore'].find()
dataJson = []
for data in allData:
id = data['_id']
activityName = data['activityName']
score = data['score']
actualResult = data['actualResult']
predResult = data['predResult']
createdTime = data['createdTime']
totalTime = data['totalTime']
candidateID = data['candidateID']
answerImage = data['answerImage']
dataDict = {
'id': str(id),
'activityName': activityName,
'score': score,
'actualResult': actualResult,
'predResult': predResult,
'createdTime': createdTime,
'totalTime': totalTime,
'candidateID': candidateID,
'answerImage': answerImage
}
dataJson.append(dataDict)
return jsonify(dataJson)
# Knowledge IQ evaluation
@app.route('/predictKnowledgeIq', methods=['POST', 'GET'])
@cross_origin()
def predictKnowledgeIq():
......@@ -467,9 +504,10 @@ def predictKnowledgeIq():
file = request.files.get('file')
questionIndex = request.form.get('questionIndex')
activityName = request.form.get('activityName')
candidateID = request.form.get('candidateID')
print(questionIndex)
if file is None or file.filename == "":
return jsonify({'error: no file'})
return jsonify({'error': 'no file'})
try:
file.save("./"+file.filename)
......@@ -479,15 +517,18 @@ def predictKnowledgeIq():
activityName, questionIndex, prediction)
db.db['knowledgeIQScore'].insert_one({
"activityName": activityName,
"candidateID": candidateID,
"questionIndex": questionIndex,
"transcription": prediction,
"accuracyScore": score[0],
"similarityScore": score[1]
"similarityScore": score[1],
"expectedAnswer": score[2],
"refinedTranscript": score[3]
})
return jsonify(data)
except:
return jsonify({'error: Error during pipeline execution'})
return jsonify({'result: test'})
return jsonify({'error': 'Error during pipeline execution'})
return jsonify({'result': 'test'})
# @app.route("/testDB")
......@@ -499,6 +540,7 @@ def predictKnowledgeIq():
# Running app
if __name__ == "__main__":
app.secret_key = os.urandom(24)
app.run(host="172.20.10.2",ssl_context='adhoc',debug=True, use_reloader=False)
app.run(host="172.20.10.7", ssl_context='adhoc',
debug=True, use_reloader=False)
flask_cors.CORS(app, expose_headers='Authorization')
web-app/frontend/package.json
View file @ c9510fad
{
"name": "web-app-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^1.0.6",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.3",
"@mui/x-date-pickers": "^5.0.0-beta.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"date-fns": "^2.29.1",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-circular-progressbar": "^2.0.4",
"react-countdown-circle-timer": "^3.0.9",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-image-crop": "^10.0.7",
"react-record-webcam": "^0.0.14",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-signature-canvas": "^1.0.6",
"react-spinners": "^0.13.4",
"recordrtc": "^5.6.2",
"validator": "^13.7.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"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": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.7"
}
"name": "web-app-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^1.0.6",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.3",
"@mui/x-date-pickers": "^5.0.0-beta.3",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"date-fns": "^2.29.1",
"file-saver": "^2.0.5",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-circular-progressbar": "^2.0.4",
"react-countdown-circle-timer": "^3.0.9",
"react-dom": "^18.2.0",
"react-hot-toast": "^2.4.0",
"react-image-crop": "^10.0.7",
"react-record-webcam": "^0.0.14",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-signature-canvas": "^1.0.6",
"react-spinners": "^0.13.4",
"react-webcam": "^7.0.1",
"recordrtc": "^5.6.2",
"validator": "^13.7.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"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": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.7"
}
}
web-app/frontend/src/components/activities/ActivityContainer.css
View file @ c9510fad
......@@ -32,7 +32,7 @@
border: solid gainsboro;
border-radius: 5px;
padding: 5px;
/* padding: 5px; */
}
.activity-container-navigator-item {
......
web-app/frontend/src/components/activities/attentionEval/analyticalSide/AnalyticalContainer.jsx
View file @ c9510fad
import React, { useState, useRef, useEffect } from "react";
import VideoPlayerScreen2 from "../videoPlayer2";
function AnalyticalAttention() {
return (
<p>Hello</p>
)
const [currentLevel, setCurrentLevel] = useState(4);
const [attention, setattention] = useState([]);
useEffect(() => {
console.log("Checking currentLevel:", currentLevel);
}, [currentLevel]);
const changeActivityLevel = (state) => {
setTimeout(async () => {
await console.log("video has ended", state);
await setCurrentLevel(currentLevel + 1);
await console.log("Level is :", currentLevel);
}, 2000);
};
return (
<>
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="m-1 p-2">
{currentLevel === 4 && (
<VideoPlayerScreen2
currentActivtyIndex={4}
activityType={"AnalyticalAttention"}
changeLevel={changeActivityLevel}
/>
)}
{currentLevel === 5 && (
<VideoPlayerScreen2
currentActivtyIndex={5}
activityType={"AnalyticalAttention"}
changeLevel={changeActivityLevel}
/>
)}
{currentLevel === 6 && (
<VideoPlayerScreen2
currentActivtyIndex={6}
activityType={"AnalyticalAttention"}
changeLevel={changeActivityLevel}
/>
)}
</div>
</div>
</>
);
}
export default AnalyticalAttention
\ No newline at end of file
export default AnalyticalAttention;
web-app/frontend/src/components/activities/attentionEval/creativeSide/CreativeContainer.jsx
View file @ c9510fad
import React, { useState, useRef, useEffect } from "react";
import React, { useState, useEffect } from "react";
import "./creativeside.css";
import VideoPlayerScreen2 from "../videoPlayer2";
function CreativeAttention () {
return (
<p>Hello creative people</p>
)
function CreativeAttention() {
const [currentLevel, setCurrentLevel] = useState(1);
const [attention, setattention] = useState([]);
useEffect(() => {
console.log("Checking currentLevel:", currentLevel);
}, [currentLevel]);
const changeActivityLevel = (state) => {
setTimeout(async () => {
await console.log("video has ended", state);
await setCurrentLevel(currentLevel + 1);
await console.log("Level is :", currentLevel);
}, 2000);
};
return (
<>
<div className="overflow-hidden bg-white shadow sm:rounded-lg">
<div className="m-1 p-2">
{currentLevel === 1 && (
<VideoPlayerScreen2
currentActivtyIndex={1}
activityType={"CreativeAttention"}
changeLevel={changeActivityLevel}
/>
)}
{currentLevel === 2 && (
<VideoPlayerScreen2
currentActivtyIndex={2}
activityType={"CreativeAttention"}
changeLevel={changeActivityLevel}
/>
)}
{currentLevel === 3 && (
<VideoPlayerScreen2
currentActivtyIndex={3}
activityType={"CreativeAttention"}
changeLevel={changeActivityLevel}
/>
)}
</div>
</div>
</>
);
}
export default CreativeAttention
\ No newline at end of file
export default CreativeAttention;
web-app/frontend/src/components/activities/attentionEval/predictAttention.jsx 0 → 100644
View file @ c9510fad
import React, {useState,useEffect} from "react";
import API from '../../../config/api';
export const predictAttention = async (data) => {
let response;
await API.post("attentionPrediction", data, {
headers: {
"Access-Control-Allow-Origin": "*",
},
})
.then((res) => {
console.log(res.data[0])
response = res.data[0];
})
.catch((err) => {
console.log(err);
});
return response
}
\ No newline at end of file
web-app/frontend/src/components/activities/attentionEval/videoPlayer2.jsx 0 → 100644
View file @ c9510fad
import React, { useState, useEffect, useRef } from "react";
import Webcam from "react-webcam";
import { predictAttention } from "./predictAttention";
const VideoPlayerScreen2 = ({ currentActivtyIndex, activityType, changeLevel }) => {
const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
const [videoLink, setVideoLink] = useState("");
const vidRef = useRef();
const [capturing, setCapturing] = React.useState(false);
const [recordedChunks, setRecordedChunks] = React.useState([]);
const videoConstraints = {
facingMode: "user",
};
const handleStartCaptureClick = React.useCallback(() => {
console.log("Started recording");
setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: "video/webm",
});
mediaRecorderRef.current.addEventListener(
"dataavailable",
handleDataAvailable
);
mediaRecorderRef.current.start();
}, [webcamRef, setCapturing, mediaRecorderRef]);
const handleDataAvailable = React.useCallback(
({ data }) => {
if (data.size > 0) {
setRecordedChunks((prev) => prev.concat(data));
}
},
[setRecordedChunks]
);
const handleStopCaptureClick = React.useCallback(() => {
mediaRecorderRef.current.stop();
setCapturing(false);
console.log("Stopped recording");
}, [mediaRecorderRef, webcamRef, setCapturing]);
const handlePredict = React.useCallback(() => {
let candidateID = null;
if (localStorage) {
candidateID = localStorage.getItem("candidateID");
}
console.log("Next level")
changeLevel(true);
if (recordedChunks.length) {
console.log("Prediction started");
const blob = new Blob(recordedChunks, {
type: "video/webm",
});
const data = new FormData();
data.append("file", blob);
data.append("filename", "att.mp4");
data.append("questionIndex", currentActivtyIndex);
data.append("attentionttype", activityType);
data.append("candidateID", candidateID);
predictAttention(data);
setRecordedChunks([]);
}
}, [recordedChunks]);
useEffect(() => {
switch (currentActivtyIndex) {
case 1:
setVideoLink("/Videos/drawafish.mp4");
break;
case 2:
setVideoLink("/Videos/singaSong.mp4");
break;
case 3:
setVideoLink("/Videos/makeflowers.mp4");
break;
case 4:
setVideoLink("/Videos/drawafish.mp4");
break;
case 5:
setVideoLink("/Videos/drawafish.mp4");
break;
case 6:
setVideoLink("/Videos/drawafish.mp4");
break;
default:
}
const timer = setTimeout(() => {
vidRef.current.play();
}, 3000);
return () => clearTimeout(timer);
}, [currentActivtyIndex]);
const myCallback = async () => {
await handleStopCaptureClick();
};
const myCallback2 = () => {
handleStartCaptureClick();
};
return (
<>
<div className="w-full m-4 p-4">
<div className="flex items-center">
{videoLink && (
<>
<video
ref={vidRef}
className="w-full h-full p-2"
controls
onEnded={() => myCallback()}
onPlay={() => myCallback2()}
>
<source src={videoLink} type="video/mp4" />
</video>
</>
)}
</div>
{recordedChunks.length > 0 && (
<button onClick={handlePredict}>Next</button>
)}
<div className="invisible h-0 w-0">
<Webcam
audio={false}
videoConstraints={videoConstraints}
ref={webcamRef}
/>
</div>
</div>
</>
);
};
export default VideoPlayerScreen2;
web-app/frontend/src/components/activities/audioPlayerScreen.jsx
View file @ c9510fad
......@@ -10,11 +10,6 @@ const AudioPlayerScreen = ({ currentActivtyIndex, changeScreen }) => {
<div id=" w-full h-full bg-white">
<ContainerCard>
<div>
<div >
<h2 className="text-base text-[#3d59c1] font-semibold tracking-wide uppercase mt-4">
Digit Span
</h2>
</div>
<div className="mt-10 sm:mt-0">
<Audio
currentActivtyIndex={currentActivtyIndex}
......
web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/ColourNumbers.css
View file @ c9510fad
.new{
padding-top: 10%;
padding-top: 16%;
padding-bottom: 16%;
background-color: white;
}
.digitCard:hover {
......
web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/ColourNumbers.jsx
View file @ c9510fad
import React, {useState, useEffect} from "react";
import Grid from "@mui/material/Grid";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import React, {useEffect, memo} from "react";
import "./ColourNumbers.css";
import { lightBlue, yellow } from "@mui/material/colors";
import { createTheme, ThemeProvider, styled } from "@mui/material/styles";
import { RecordingHandler } from "../recorder/Recorder";
import Timer from "../../reasoningIqEval/timer/Timer";
const Item = styled(Paper)(({ theme }) => ({
textAlign: "center",
color: theme.palette.text.primary,
height: 60,
lineHeight: "60px",
textDecorationColor: "black",
fontWeight: "Bold",
}));
import Timer from "../timer/Timer";
import { useRef } from "react";
const ColourNumbers = ({ GoNext, isAllCompleted, currentActivityNo }) => {
const ColourNumbers = ({ GoNext, isAllCompleted }) => {
const [allCompleted, setAllCompleted] = useState(false);
const [activityIndex, setActivityIndex] = useState(1);
const effectRan = useRef(false);
const switchActivityHandler = () => {
let activityNo = activityIndex + 1;
setActivityIndex(activityNo);
// switch question
console.log('switch');
};
useEffect(() => {
setTimeout(() => {
}, 5000);
console.log('rec');
RecordingHandler(`CN.wav`, activityIndex, 'CN');
}, [activityIndex]);
useEffect(() => {
if(effectRan.current === false){
RecordingHandler(`CN.wav`, currentActivityNo, 'Colour Numbers');
return () => {
effectRan.current = true;
}
}
}, [currentActivityNo]);
return (
<div className="new">
<Grid container>
<Grid item xs={16}>
<Box
className=" mt-32"
sx={{
p: 2,
bgcolor: "background.default",
display: "grid",
gridTemplateColumns: { md: "1fr 1fr 1fr 1fr 1fr" },
gap: 6,
}}
>
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => (
<Item
className="digitCard"
key={value}
elevation={24}
sx={
value % 2
? { bgcolor: lightBlue[900] }
: { bgcolor: yellow[500] }
}
>
{`${value}`}
</Item>
))}
</Box>
</Grid>
</Grid>
{!allCompleted && <Timer switchActivity={switchActivityHandler} />}
{!isAllCompleted && <Timer switchActivity={GoNext} />}
</div>
);
};
export default ColourNumbers;
export default memo(ColourNumbers);
web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/colourNumbersController.jsx
View file @ c9510fad
......@@ -3,8 +3,8 @@ import { ColourNumbers } from "../../..";
import VideoPlayerScreen from "./videoPlayer";
const ColourNumbersController = () => {
const activityCount = 4;
const ColourNumbersController = ({nextActivity}) => {
const activityCount = 7;
const [currentActivityNo, setCurrentActivityNo] = useState(1);
const [isAudioCompleted, setIsAudioCompleted] = useState(false);
const [isAllCompleted, setIsAllCompleted] = useState(false);
......@@ -25,6 +25,12 @@ const ColourNumbersController = () => {
}, 1000);
};
useEffect(() => {
if (isAllCompleted) {
nextActivity();
}
}, [isAllCompleted, nextActivity]);
return (
<>
<div className="w-full h-full">
......
web-app/frontend/src/components/activities/knowledgeIqEval/colourNumbers/videos.jsx
View file @ c9510fad
import React, { useState, useEffect, useRef } from "react";
import Vid4 from "../../../../assets/video/vid6.mp4";
import CN1 from "../../../../assets/video/CN-3.mp4";
import CN2 from "../../../../assets/video/CN-2-1.mp4";
import CN3 from "../../../../assets/video/CN-9-2.mp4";
import CN4 from "../../../../assets/video/CN-3-8.mp4";
import CN5 from "../../../../assets/video/CN-1-4-8.mp4";
import CN6 from "../../../../assets/video/CN-7-6-5-2.mp4";
import CN7 from "../../../../assets/video/CN-6-1-4-5-8.mp4";
const Video = ({ currentActivtyIndex, changeScreen }) => {
const [videoLink, setVideoLink] = useState("");
......@@ -8,19 +14,25 @@ const Video = ({ currentActivtyIndex, changeScreen }) => {
useEffect(() => {
switch (currentActivtyIndex) {
case 1:
setVideoLink(Vid4);
setVideoLink(CN1);
break;
case 2:
setVideoLink(Vid4);
setVideoLink(CN2);
break;
case 3:
setVideoLink(Vid4);
setVideoLink(CN3);
break;
case 4:
setVideoLink(Vid4);
setVideoLink(CN4);
break;
case 5:
setVideoLink("/Videos/vid1.mp4");
setVideoLink(CN5);
break;
case 6:
setVideoLink(CN6);
break;
case 7:
setVideoLink(CN7);
break;
default:
}
......
web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/DigitSpan.css
View file @ c9510fad
......@@ -3,4 +3,15 @@
position: relative;
height: 100%;
width: 100%;
background-color: white;
}
.new{
padding-top: 16%;
padding-bottom: 16%;
}
img{
height: 450px;
width: auto;
}
\ No newline at end of file
web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/DigitSpan.jsx
View file @ c9510fad
import React, { useState, useEffect } from "react";
import { green, red } from "@mui/material/colors";
import Avatar from "@mui/material/Avatar";
import React, { useEffect, memo, useRef } from "react";
import Stack from "@mui/material/Stack";
import MicSharpIcon from "@mui/icons-material/MicSharp";
import MicOffSharpIcon from "@mui/icons-material/MicOffSharp";
import VolumeUpIcon from "@mui/icons-material/VolumeUp";
import VolumeOffIcon from "@mui/icons-material/VolumeOff";
import Picture from "../../../../assets/digitspan.jpg";
import Button from "@mui/material/Button";
import Timer from "../../reasoningIqEval/timer/Timer";
import Timer from "../timer/Timer";
import { RecordingHandler } from "../recorder/Recorder";
import "./DigitSpan.css";
const DigitSpan = ({ GoNext, isAllCompleted, currentActivityNo }) => {
const [activityIndex, setActivityIndex] = useState(1);
const effectRan = useRef(false);
useEffect(() => {
console.log("rec");
RecordingHandler(`DS.wav`, currentActivityNo, 'DS');
if(effectRan.current === false) {
RecordingHandler(`DS.wav`, currentActivityNo, 'Digit Span');
return () => {
effectRan.current = true;
}
}
}, [currentActivityNo]);
......@@ -35,6 +32,7 @@ const DigitSpan = ({ GoNext, isAllCompleted, currentActivityNo }) => {
</div>
)}
<Stack
className="new"
direction="row"
spacing={2}
justifyContent="center"
......@@ -42,15 +40,8 @@ const DigitSpan = ({ GoNext, isAllCompleted, currentActivityNo }) => {
>
{!isAllCompleted && <Timer switchActivity={GoNext} />}
</Stack>
{/* <Button
onClick={() => {
nextActivity();
}}
>
Next
</Button> */}
</div>
);
};
export default DigitSpan;
export default memo(DigitSpan);
web-app/frontend/src/components/activities/knowledgeIqEval/digitSpan/digitSpanController.jsx
View file @ c9510fad
......@@ -3,8 +3,8 @@ import { DigitSpan } from "../../..";
import AudioPlayerScreen from "../../audioPlayerScreen";
const DigitSpanController = () => {
const activityCount = 4;
const DigitSpanController = ({nextActivity}) => {
const activityCount = 5;
const [currentActivityNo, setCurrentActivityNo] = useState(1);
const [isAudioCompleted, setIsAudioCompleted] = useState(false);
const [isAllCompleted, setIsAllCompleted] = useState(false);
......@@ -25,6 +25,12 @@ const DigitSpanController = () => {
}, 1000);
};
useEffect(() => {
if (isAllCompleted) {
nextActivity();
}
}, [isAllCompleted, nextActivity]);
return (
<>
<div className="w-full h-full">
......
web-app/frontend/src/components/activities/knowledgeIqEval/timer/Timer.css 0 → 100644
View file @ c9510fad
h1 {
font-family: "Roboto";
text-align: center;
margin-bottom: 40px;
}
.timer-wrapper {
display: flex;
justify-content: center;
}
.timer {
font-family: "Montserrat";
display: flex;
flex-direction: column;
align-items: center;
}
.text {
color: #aaa;
}
.value {
font-size: 40px;
}
.info {
max-width: 360px;
margin: 40px auto 0;
text-align: center;
font-size: 16px;
}
web-app/frontend/src/components/activities/knowledgeIqEval/timer/Timer.jsx 0 → 100644
View file @ c9510fad
import React from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import "./Timer.css";
const Timer = ({ switchActivity }) => {
const renderTime = ({ remainingTime }) => {
if (remainingTime === 0) {
return <div className="timer text-black">--</div>;
} else {
return <div className="value text-black">{remainingTime}</div>;
}
};
return (
<div className="Timer">
<div className="timer-wrapper">
<CountdownCircleTimer
isPlaying
duration={15}
colors={["#004777", "#F7B801", "#A30000", "#A30000"]}
colorsTime={[15, 10, 7, 5]}
rotation={"counterclockwise"}
size={180}
strokeWidth={8}
onComplete={() => {
// change activity
switchActivity();
return { shouldRepeat: true, delay: 0 }; // repeat animation in 1.5 seconds
}}
>
{renderTime}
</CountdownCircleTimer>
</div>
</div>
);
};
export default Timer;
web-app/frontend/src/components/activities/mentalChronometryEval/pairCancerlation/PairCancerlationContainer.jsx
View file @ c9510fad
......@@ -190,7 +190,7 @@ const PairCancerlationContainer = () => {
{" "}
<div>
{" "}
<img src={Pair[activityIndex]} alt="description" />{" "}
<img src={Pair[activityIndex]}/>{" "}
</div>
</div>
<div className="grid grid-cols-1 h-fit m-10">
......
web-app/frontend/src/config/api.js
View file @ c9510fad
import axios from "axios";
export default axios.create({
baseURL: `http://127.0.0.1:5000/`,
baseURL: `https://172.20.10.7:5000/`,
});
web-app/frontend/src/utility/audio.jsx
View file @ c9510fad
import React, { useState, useEffect, useRef } from "react";
import D1 from "../Audio/DS1.mp3";
import D2 from "../Audio/DS2.mp3";
import D3 from "../Audio/DS3.mp3";
import D1 from "../Audio/2-7.mp3";
import D2 from "../Audio/3-8-6.mp3";
import D3 from "../Audio/6-2-5-1.mp3";
import D4 from "../Audio/8-6-2-3-7.mp3";
import D5 from "../Audio/3-8-2-1-5-7.mp3";
const Audio = ({ currentActivtyIndex, changeScreen }) => {
const Audio = React.memo(({ currentActivtyIndex, changeScreen }) => {
const myAudio = useRef();
const [audio, setAudio] = useState("");
const vidRef = useRef();
......@@ -20,10 +22,10 @@ const Audio = ({ currentActivtyIndex, changeScreen }) => {
setAudio(D3);
break;
case 4:
setAudio(D1);
setAudio(D4);
break;
case 5:
setAudio(D2);
setAudio(D5);
break;
default:
}
......@@ -54,14 +56,16 @@ const Audio = ({ currentActivtyIndex, changeScreen }) => {
type="audio"
onEnded={() => myCallback()}
/>
<button className="text-black" onClick={handleBeep}>
Start
</button>
{" "}
<img
className="m-auto"
src="https://i.ibb.co/Lt4BV8q/teacher-DS.gif"
alt="pattern"
/>
</>
)}
</div>
);
};
});
export default Audio;
web-app/frontend/src/utility/videos.jsx
View file @ c9510fad
......@@ -22,10 +22,10 @@ const Video = ({ currentActivtyIndex, changeScreen }) => {
setVideoLink("/Videos/vid5.mp4");
break;
case 6:
setVideoLink("/Videos/vid2.mp4");
setVideoLink("/Videos/vid6.mp4");
break;
case 7:
setVideoLink("/Videos/vid3.mp4");
setVideoLink("/Videos/vid7.mp4");
break;
case 8:
setVideoLink("/Videos/vid4.mp4");
......
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