me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add stats during a test

Browse Source
This commit is contained in:
Matthew Grove
2021-09-11 22:16:13 +01:00
parent 20fbda3b22
commit 7e2d747da6
3 changed files with 190 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/Progress.js
View File

@@ -8,6 +8,7 @@ import Error404 from "./Error404";
import SettingsContent from "./SettingsContent";
import Footer from "./Footer";
import LineChart from './LineChart';
import ProgressStats from './ProgressStats';
import "./css/PopUp.css";
import "./css/Progress.css";
@@ -63,6 +64,8 @@ export default withRouter(class Progress extends React.Component {
setIds: [],
attemptNumber: 1,
attemptHistory: {},
questions: [],
originalTotalQuestions: 1,
};
let isMounted = true;
@@ -98,6 +101,7 @@ export default withRouter(class Progress extends React.Component {
mode: data.mode,
nextPrompt: null,
setIds: data.setIds,
originalTotalQuestions: [...new Set(data.questions)].length,
};
if (data.lives) {
@@ -189,7 +193,7 @@ export default withRouter(class Progress extends React.Component {
}
this.setState(newState, () => {
if (!setDone) this.answerInput.focus()
if (!setDone) this.answerInput.focus();
});
this.props.logEvent("select_content", {
@@ -380,7 +384,9 @@ export default withRouter(class Progress extends React.Component {
await Promise.all(promises);
this.setState(newState);
this.setState(newState, () => {
if (!newState.duration) this.answerInput.focus()
});
}).catch((error) => {
console.log(`Couldn't process answer: ${error}`);
this.setState({
@@ -443,11 +449,11 @@ export default withRouter(class Progress extends React.Component {
:
<>
<NavBar items={this.state.navbarItems} />
<main>
{
this.state.currentAnswerStatus === null
?
<>
<main className="progress-container">
<div>
<p className="current-prompt">{this.state.currentPrompt}</p>
<form className="answer-input-container" onSubmit={(e) => e.preventDefault()} >
<input type="submit" className="form-submit" onClick={this.showNextItem} />
@@ -489,11 +495,12 @@ export default withRouter(class Progress extends React.Component {
""
}
</div>
</>
</div>
</main>
:
this.state.nextPrompt === null && !this.state.moreAnswers
?
<>
<main>
{/* DONE */}
<h1>{this.state.setTitle}</h1>
<div className="stat-row stat-row--inline">
@@ -552,10 +559,11 @@ export default withRouter(class Progress extends React.Component {
Done
</LinkButton>
</div>
</>
</main>
:
<>
<main className="progress-container">
{/* ANSWER PROCESSED */}
<div>
<p className="current-prompt">{this.state.currentPrompt}</p>
<form className="answer-input-container answer-input-container--answer-entered" onSubmit={(e) => e.preventDefault()} >
<input type="submit" className="form-submit" onClick={this.showNextItem} />
@@ -564,6 +572,7 @@ export default withRouter(class Progress extends React.Component {
name="answer_input"
className={`answer-input ${this.state.currentAnswerStatus ? "answer-input--correct" : "answer-input--incorrect"}`}
value={this.state.answerInput}
ref={inputEl => (this.answerInput = inputEl)}
readOnly
/>
<Button
@@ -596,9 +605,20 @@ export default withRouter(class Progress extends React.Component {
""
}
</div>
</>
}
</div>
</main>
}
{
(this.state.currentAnswerStatus === null ||
!(this.state.nextPrompt === null && !this.state.moreAnswers)) &&
<ProgressStats
correct={this.state.correct}
incorrect={this.state.incorrect}
totalVocabItems={this.state.originalTotalQuestions}
progress={this.state.progress}
grade={this.state.totalQuestions > 0 ? this.state.correct / this.state.totalQuestions * 100 : 0}
/>
}
<Footer />
{

31
src/ProgressStats.js Normal file
View File

@@ -0,0 +1,31 @@
import React from "react";
export default function ProgressStats(props) {
return (
<div className="progress-stats">
<div className="progress-stat-row-container">
<div className="stat-row stat-row--inline stat-row--no-gap">
<h1>{props.grade.toFixed(2)}</h1>
<p>%</p>
</div>
<div className="stat-row stat-row--inline">
<h1>{props.correct}</h1>
<p>correct</p>
</div>
<div className="stat-row stat-row--inline">
<h1>{props.incorrect}</h1>
<p>mistake{ props.incorrect !== 1 && "s" }</p>
</div>
<div className="stat-row stat-row--inline">
<h1>{props.progress}</h1>
<p>guess{props.progress !== 1 && "es"}</p>
</div>
</div>
<div className="progress-bar">
<div style={{ width: props.correct > 0 && props.totalVocabItems > 0 ? `${(props.correct / props.totalVocabItems * 100)}%` : "0" }}>
<p>{props.correct}/{props.totalVocabItems}</p>
</div>
</div>
</div>
)
}

45
src/css/Progress.css
View File

@@ -79,6 +79,51 @@ input.answer-input--incorrect {
display: none;
}
.progress-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.progress-stats {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 24px;
}
.progress-stat-row-container {
display: flex;
flex-direction: row;
column-gap: 48px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.progress-bar {
width: 100%;
border: 1px solid var(--overlay-color);
border-radius: 16px;
}
.progress-bar > div {
height: 100%;
background-color: var(--primary-color);
border-radius: 16px 0 0 16px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.progress-bar > div > p {
padding-left: 8px;
margin: 0 0 -2px 0;
}
@media screen and (max-width: 720px) {
.progress-end-button-container > .button {
margin: 24px;