Redoing the arithmetic quiz in React

In this assignment you will reimplement the arithmatic quiz as a React application.

Start by creating a project folder on your computer for your React projects. Start up Visual Studio Code and open that project folder in Code.

To set up our the React project for this exercise you will have to run some commands in the terminal. The most convenient way to do this is to use the built-in terminal pane in Code. To open the terminal pane, select New Terminal from the Terminal menu in Code.

To create the React project for this exercise, run this command in the terminal pane:

npm create vite@latest arithmetic -- --template react

This will create a project folder named arithmetic. The project starts out with some default content provided by Vite.

A better starting point for this exercise is the "Hello, World" React example I covered in the first set of lecture notes on React. To implement this, replace the code for the App component in your project's App.jsx file with the following:

function App() {
  const [name,setName] = useState('');
  const nameInput = useRef();

  function doGreeting() {
    setName(nameInput.current.value);
  }

  if(name.length == 0)
    return (
      <div>
        <label htmlFor="name">Enter your name</label>
        <input type="text" ref={nameInput} id="name" />
        <button onClick={doGreeting}>Greet Me</button>
      </div>
    );
  else
    return (
      <p>Hello, {name}! Welcome to React.</p>
    );
}

You will also need to update one of the import statements at the top of the file. Replace

import { useState } from 'react'

with

import { useState, useRef } from 'react'

You can run the project to see its initial state by running the following commands in the terminal:

cd hello-react
npm install
npm run dev

Implementing the quiz

To convert the Hello, World app to an arithmetic quiz app you will start by making some simple changes.

The first change is to introduce appropriate state variables for an arithmetic quiz. Get rid of the statement

const [name,setName] = useState('');

and replace it with

const [completed,setCompleted] = useState(0);
const [correct,setCorrect] = useState(0);

This introduces the two state variables you will need to track the user's progress through the quiz. The completed variable tracks how many problems the user has answered, and the correct variable records how many of those problems the user has got right.

Next, you will need to add a variable that stores the problems. For this assignment we are going to use the very simple approach of just listing out the problems as a list of five simple objects:

const problems = [{question:"2+2 = ?",answer:"4"},{question:"17-9 = ?",answer:"8"},
    {question:"12*4 = ?",answer:"48"},{question:"8*7 = ?",answer:"56"},{question:"65/5 = ?",answer:"13"}];

Next you will need to replace the code that renders the component. For this you should use conditional rendering logic that either shows a quiz question or a message that says the quiz is done.

Finally, write the code for the action function that gets linked to the 'Check' button to check the user's answer to the current problem. That function should check the user's answer and then update the two state variables appropriately. Updating the state variables will trigger a refresh of your component, which should automatically display the next question or the "quiz is done" message.

Turning in your work

To submit your work for this assignment, just send me your project's App.jsx file as an attachment to an email message.