Dev config

functions/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable indent */
 /* eslint-disable no-tabs */
 const levenshtein = require('js-levenshtein');
-const functions = require("firebase-functions").region("europe-west2");//.region("europe-west2")
+const functions = require("firebase-functions");//.region("europe-west2")
 const admin = require("firebase-admin");
 admin.initializeApp();
 const db = admin.firestore();
@@ -611,7 +611,7 @@ exports.processAnswer = functions.https.onCall((data, context) => {
 							currentVocab
 						);
 					} else {
-					docData.questions.push(currentVocab);
+						docData.questions.push(currentVocab);
 					}
 					returnData.totalQuestions = docData.questions.length;
 					returnData.totalIncorrect = docData.incorrect.length;

src/App.js

@@ -53,10 +53,10 @@ appCheck.activate(
   true
 );
 
-// firebase.functions().useEmulator("localhost", 5001);
-// firebase.auth().useEmulator("http://localhost:9099");
-// firebase.firestore().useEmulator("localhost", 8080);
-const functions = firebase.app().functions("europe-west2");//firebase.functions();
+firebase.functions().useEmulator("localhost", 5001);
+firebase.auth().useEmulator("http://localhost:9099");
+firebase.firestore().useEmulator("localhost", 8080);
+const functions = firebase.functions();//firebase.app().functions("europe-west2");
 
 const fadeIn = keyframes`
   from {

src/Home.js

@@ -1,10 +1,12 @@
 import React, { useEffect } from "react";
 import "@material-ui/core";
-import { AccountCircleRounded as AccountCircleIcon } from "@material-ui/icons";
+import { AccountCircleRounded as AccountCircleIcon, ArrowDropDownRounded as ArrowDropDownRoundedIcon } from "@material-ui/icons";
 import "./css/Home.css";
 import NavBar from './NavBar';
 import Footer from "./Footer";
 
+import Collapsible from "react-collapsible";
+
 export default function Home(props) {
 	const navbarItems = [
 		{
@@ -41,6 +43,15 @@ export default function Home(props) {
 					<p>To get started, click login 👆</p>
 					<br/>
 					<p>If you have any feedback, please feel free to email me at <a href="mailto:parandum@mgrove.uk">parandum@mgrove.uk</a>.</p>
+					<br/>
+					<h2>What's New?</h2>
+					<Collapsible transitionTime={300} trigger={<>v2.0.6<ArrowDropDownRoundedIcon /></>}>
+						<ul>
+							<li>Add option to show number of answers for each prompt</li>
+							<li>Ensure test options are carried over to new tests that are made from pre-existing ones (i.e. with the restart test buttons)</li>
+						</ul>
+						{/* TODO: style */}
+					</Collapsible>
 				</div>
 			</main>
 			<Footer />

src/Progress.js

@@ -62,6 +62,7 @@ export default withRouter(class Progress extends React.Component {
 		startTime: null,
 		sound: false,
 		ignoreCaps: false,
+		ignoreAccents: false,
 		numberOfAnswers: null,
 		virtualKeyboardLanguage: "english",
 		virtualKeyboardLayoutName: "default",
@@ -628,7 +629,7 @@ export default withRouter(class Progress extends React.Component {
 				const progressId = result.data;
 				this.stopLoading();
 				this.props.history.push("/progress/" + progressId);
-	
+				
 				this.setState({
 					incorrectAnswers: {},
 				});
@@ -742,33 +743,33 @@ export default withRouter(class Progress extends React.Component {
 								<div className="correct-answers">
 									{
 										this.state.currentCorrect && this.state.currentCorrect.length > 0
-											?
-											<>
-												<h2>
-													{
-														this.state.moreAnswers
-															?
+										?
+										<>
+											<h2>
+												{
+													this.state.moreAnswers
+													?
 													this.state.numberOfAnswers !== null
 													?
 													`${this.state.currentCorrect.length} of ${this.state.numberOfAnswers} correct so far:`
 													:
-															"Correct so far:"
-															:
-															"Answers:"
-													}
-												</h2>
-												{this.state.currentCorrect.map((vocab, index) =>
-													<p key={index}>{vocab}</p>
-												)}
-											</>
-											:
+													"Correct so far:"
+													:
+													"Answers:"
+												}
+											</h2>
+											{this.state.currentCorrect.map((vocab, index) => 
+												<p key={index}>{vocab}</p>
+											)}
+										</>
+										:
 										this.state.numberOfAnswers !== null
 										?
 										<h2>
 										{this.state.currentCorrect.length} of {this.state.numberOfAnswers} correct so far
 										</h2>
 										:
-											""
+										""
 									}
 								</div>
 							</div>

src/css/OptionsListOverlay.css

@@ -1,13 +1,15 @@
 .options-list-overlay-content {
 	width: fit-content;
-	height: fit-content;
 	padding: 0;
+	overflow: hidden;
+	justify-items: center;
 }
 
 .options-list-overlay-content > * {
 	border-bottom: 1px solid var(--overlay-color);
 	cursor: pointer;
 	margin: 0;
+	width: calc(100% - 96px);
 }
 
 .options-list-overlay-content > *:not(:last-child) {