Change layout of stats on test completion

This commit is contained in:
2021-09-11 22:22:55 +01:00
parent d5c48c7acc
commit 7f5ae50e22

View File

@@ -503,21 +503,23 @@ export default withRouter(class Progress extends React.Component {
<main> <main>
{/* DONE */} {/* DONE */}
<h1>{this.state.setTitle}</h1> <h1>{this.state.setTitle}</h1>
<div className="stat-row stat-row--inline"> <div className="progress-stat-row-container">
<p>You got</p> <div className="stat-row stat-row--inline">
<h1>{`${(this.state.correct / this.state.totalQuestions * 100).toFixed(2)}%`}</h1> <p>You got</p>
</div> <h1>{`${(this.state.correct / this.state.totalQuestions * 100).toFixed(2)}%`}</h1>
<div className="stat-row stat-row--inline"> </div>
<h1>{`${this.state.correct} of ${this.state.totalQuestions}`}</h1> <div className="stat-row stat-row--inline">
<p>marks</p> <h1>{`${this.state.correct} of ${this.state.totalQuestions}`}</h1>
</div> <p>marks</p>
<div className="stat-row stat-row--inline"> </div>
<p>You took</p> <div className="stat-row stat-row--inline">
<h1>{this.msToTime(this.state.duration)}</h1> <p>You took</p>
</div> <h1>{this.msToTime(this.state.duration)}</h1>
<div className="stat-row stat-row--inline stat-row--no-gap"> </div>
<p>Attempt #</p> <div className="stat-row stat-row--inline stat-row--no-gap">
<h1>{this.state.attemptNumber}</h1> <p>Attempt #</p>
<h1>{this.state.attemptNumber}</h1>
</div>
</div> </div>
{ {
this.state.incorrectAnswers && Object.keys(this.state.incorrectAnswers).length > 0 && this.state.incorrectAnswers && Object.keys(this.state.incorrectAnswers).length > 0 &&