Add stats during a test

src/Progress.js

@@ -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 />
 
 					{

src/ProgressStats.js

@@ -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>
+	)
+}

src/css/Progress.css

@@ -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;