How to set button as navigate to next question

user_350305 0
Viewed 129

I've created a quiz app, and the radio buttons are set to progress to the next question. How can I set it so the "Next question" button progresses to the next question instead and shows a message to the user below the answers if they have selected correctly or not?

I tried a function on the <button className="next-question" onClick={() => nextQuestion()}>Next question</button> that triggers the setCounter of checkAnswer function to progress to the next question,but it isn’t allowing only one radio button to be clicked at a time.

function App() {
  let [points, setPoints] = useState(null);
  let [counter, setCounter] = useState(null);
  let [question, setQuestions] = useState();
  let [is_started, setStart] = useState(false);
  let [is_end, setEnd] = useState(false);

  function Answer(props) {
    return (
      <li aria-labelledby='answers-list'>
        <label><input type="radio" className="answer" data-correct={props.correct} onChange={props.checkAnswer}/>{props.answer}</label>
      </li>
    );
  }
  
  function Quiz(props) {
    return (
      <div className="quiz">
        <div className="question" role="h2">{props.question}</div>
        <ul className="answers">{props.children}</ul>
      </div>
    );
  }

  function checkAnswer(e) {
    if (e.target.dataset.correct === "true") {
      setPoints(points + 1);
    }

    let nextQuestion = counter + 1;
    if (counter < question.length - 1) {
      setCounter(nextQuestion);
    } else {
      setEnd(!is_end);
      setStart(!is_started);
      setCounter(0);
    }
  }

  return (
    <div className="Quiz">
      {!is_started ? (
      <div className="start-intro-wrapper">
        <h1 className="name">Quiz App</h1>
        <Starter start={start} />
      </div>
      ):(
        <div className="quick-wrapper">
          <Quiz question={question[counter].question}>
            {question[counter].answers.map((answer, index, arr) => {
              return (
                <Answer
                  key={index}
                  answer={answer.value}
                  checkAnswer={checkAnswer}
                  correct={answer.correct ? "true" : "false"}
                />
              );
            })}
          </Quiz>
          <button className="next-question">Next question</button>
        </div>)}
      {is_end && <div className="results-container"><ScoreMessage score={points} /></div>}
    </div>
  );
}

export default App;

Current state in Codesandbox

react-hooks reactjs ecmascript-6 javascript
1 Answers

Here's one implementation of what you've specified

import React, { useState, useEffect } from "react";
import "./styles.css";

function App() {
  let [points, setPoints] = useState(null);
  let [counter, setCounter] = useState(null);
  let [question, setQuestions] = useState();
  let [is_started, setStart] = useState(false);
  let [is_end, setEnd] = useState(false);

  const getData = () => {
    fetch("./questions.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (data) {
        setQuestions(data);
      });
  };
  useEffect(() => {
    getData();
  }, []);

  function Answer(props) {
    return (
      <li aria-labelledby="answers-list">
        <label>
          <input
            type="radio"
            name="answer_group"
            className="answer"
            value={props.answer}
          />
          {props.answer}
        </label>
      </li>
    );
  }

  function Starter(props) {
    return (
      <button className="starter" onClick={props.start}>
        {is_end ? "Restart" : "Start"}
      </button>
    );
  }

  function Quiz(props) {
    return (
      <div className="quiz">
        <div className="quesiton" role="h2">
          {props.question}
        </div>
        <ul className="answers">{props.children}</ul>
      </div>
    );
  }

  function start() {
    setCounter(0);
    setPoints(0);
    setStart(!is_started);
    setEnd(false);
  }

  function displayCorrect(correct) {
    let correct_msg = correct ? "correct" : "incorrect";
    console.log("Answer was " + correct_msg);
  }

  function nextQuestion() {
    if (document.querySelector('input[name="answer_group"]:checked') == null) {
      alert("Must select an answer before proceeding to the next question");
      return;
    }
    let val = document.querySelector('input[name="answer_group"]:checked')
      .value;
    let answerObj = question[counter].answers.filter(
      (ans) => ans.value === val
    )[0];
    let updated_points = answerObj.correct ? points + 1 : points;
    console.log(updated_points);
    setPoints(updated_points);
    let nextQuestion = counter + 1;
    if (counter < question.length - 1) {
      setCounter(nextQuestion);
    } else {
      setEnd(!is_end);
      setStart(!is_started);
      setCounter(0);
    }
    displayCorrect(answerObj.correct);
  }

  return (
    <div className="Quiz">
      {!is_started ? (
        <div className="start-intro-wrapper">
          <h1 className="name">Quiz App</h1>
          <Starter start={start} />
        </div>
      ) : (
        <div className="quick-wrapper">
          <Quiz question={question[counter].question}>
            {question[counter].answers.map((answer, index, arr) => {
              return (
                <Answer
                  key={index}
                  index={index}
                  answer={answer.value}
                  correct={answer.correct}
                />
              );
            })}
          </Quiz>
          <button className="next-question" onClick={(e) => nextQuestion()}>
            Next question
          </button>
        </div>
      )}
    </div>
  );
}

export default App;

All the code in sandbox

Edit: Included feedback as soon as a radio button is selected as OP commented.

function Answer(props) {
    return (
      <li aria-labelledby="answers-list">
        <label>
          <input
            type="radio"
            name="answer_group"
            className="answer"
            value={props.answer}
            onChange={checkAnswer}
          />
          {props.answer}
        </label>
      </li>
    );
  }

  function checkAnswer(e) {
    let val = e.target.value;
    let ans = question[counter].answers.filter((ans) => ans.value === val)[0];
    displayCorrect(ans.correct);
  }
user_132265020
Related