Include progress bar to form

To give users a visual reference of the remaining questions we
now show a progress bar to the top of the component.

Closes #67

Author: JuliaCasamitjana

src/App.module.scss

@@ -4,6 +4,7 @@
   background-color: white;
   border-radius: 4px;
   padding: 20px;
+  position: relative;
 
   .h2 {
     padding-bottom: 8px;

src/App.test.tsx

@@ -318,17 +318,26 @@ describe('App component', () => {
       await user.click(button);
 
       let indexTextEl = screen.getByText('1 of 2');
+      const progressBar = screen.getByRole('progressbar', {
+        name: 'Quiz progress',
+      });
 
       for (let i = 0; i < 5; i++) {
         // The progress count does not change
         expect(indexTextEl).toBeInTheDocument();
+        expect(progressBar).toHaveValue(0);
         await answerQuestionIncorrectly(user);
         await user.click(screen.getByText('Next Question'));
       }
 
       // After the attempts of the first question have expire, the progress is updated
+      expect(progressBar).toHaveValue(50);
       indexTextEl = screen.getByText('2 of 2');
       expect(indexTextEl).toBeInTheDocument();
+
+      await answerQuestionCorrectly(user);
+      //After submitting the answer the progress bar updates
+      expect(progressBar).toHaveValue(100);
     });
 
     it('displays the remaining attempts after wrongly answering a question', async () => {

src/components/Form.tsx

@@ -3,6 +3,7 @@ import { QuestionPoolType, AnswerType, QuestionTypes } from '../types';
 import { isAlreadySelected, validateSelectionIsCorrect } from '../util';
 import Answers from './Answers';
 import Question from './Question';
+import ProgressBar from './ProgressBar';
 import { Context } from '../Context';
 import Button from './Button';
 import styles from './Form.module.scss';
@@ -31,6 +32,7 @@ const Form = ({
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const [selections, setSelections] = useState<AnswerType[]>([]);
+  const [progress, setProgress] = useState(0);
 
   useEffect(() => {
     if (!submitted) {
@@ -98,6 +100,12 @@ const Form = ({
     }
   };
 
+  const handleProgressBar = (question: QuestionPoolType) => {
+    if (question.correctlyAnswered || question.remainingAttempts === 0) {
+      setProgress(progress + 100 / numberOfQuestions);
+    }
+  };
+
   const submitHandler = (event: FormEvent) => {
     event.preventDefault();
 
@@ -109,6 +117,7 @@ const Form = ({
     setSubmitted(true);
     updatePool(correctlyAnswered);
     addToResult(updatedQuestion(correctlyAnswered));
+    handleProgressBar(updatedQuestion(correctlyAnswered));
     setSelections([]);
   };
 
@@ -139,6 +148,7 @@ const Form = ({
 
   return (
     <form onSubmit={submitHandler} className={styles.form}>
+      <ProgressBar progress={progress} />
       <fieldset className={`${styles.form} ${styles.fieldset}`}>
         <legend className={`${styles.form} ${styles.legend}`}>
           {questionIndexText} {t('form.of')} {numberOfQuestions}

src/components/ProgressBar.module.scss

@@ -0,0 +1,45 @@
+@use './../variables.scss';
+
+$initialBarWidth: 15px;
+
+.initialProgress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 5px;
+  width: $initialBarWidth;
+  background-color: variables.$primary;
+}
+
+.progressBar[value] {
+  height: 5px;
+  /* Reset the default appearance */
+  -webkit-appearance: none;
+  appearance: none;
+  width: calc(100% - $initialBarWidth);
+  position: absolute;
+  top: 0;
+  left: $initialBarWidth;
+
+  /* Firefox */
+  background: white;
+  border: none; /* Firefox adds a default border */
+
+  /* Chrome and Safari */
+  &::-webkit-progress-bar {
+    background: white;
+  }
+
+  &::-webkit-progress-value {
+    background-color: variables.$primary;
+  }
+
+  /* Firefox */
+  &::-moz-progress-bar {
+    background-color: variables.$primary;
+  }
+
+  &::-webkit-progress-value {
+    transition: width 1s ease-in-out;
+  }
+}

src/components/ProgressBar.tsx

@@ -0,0 +1,19 @@
+import styles from './ProgressBar.module.scss';
+import { useTranslation } from 'react-i18next';
+
+const ProgressBar = ({ progress }: { progress: number }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <span className={styles.initialProgress}></span>
+      <progress
+        aria-label={t('progress.ariaLabel')}
+        className={styles.progressBar}
+        value={progress}
+        max={100}
+      ></progress>
+    </>
+  );
+};
+
+export default ProgressBar;

src/locales/de.ts

@@ -23,6 +23,9 @@ const de = {
     noBtn: 'Nein',
     yesBtn: 'Ja',
   },
+  progress: {
+    ariaLabel: 'Quiz-Fortschritt',
+  },
   question: {
     correct: 'Ihre Antwort war richtig.',
     notCorrect: 'Ihre Antwort war nicht richtig.',

src/locales/en.ts

@@ -24,6 +24,9 @@ const en = {
     noBtn: 'No',
     yesBtn: 'Yes',
   },
+  progress: {
+    ariaLabel: 'Quiz progress',
+  },
   question: {
     correct: 'Your answer was correct.',
     notCorrect: 'Your answer was not correct.',