Matthew Grove
42cfa1d619
Users can now choose from two modes - lives and questions. Lives mode will end when the user makes the chosen number of mistakes. Questions mode will end when the user answers all questions correctly from a list of questions the length of which the user chooses.
42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
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>
|
|
{
|
|
props.maxQuestions
|
|
?
|
|
<>
|
|
<p>correct of</p>
|
|
<h1>{props.maxQuestions}</h1>
|
|
<p>possible questions</p>
|
|
</>
|
|
:
|
|
<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.progressNumerator > 0 && props.progressDenominator > 0 ? `${(props.progressNumerator / props.progressDenominator * 100)}%` : "0" }}>
|
|
<p>{props.progressNumerator}/{props.progressDenominator}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|