Untitled
unknown
plain_text
2 years ago
1.6 kB
3
Indexable
import React, { useState, useEffect, useRef } from "react"; function Question({ question, totalQuestions, currentQuestion, setAnswer }) { const [selectedOption, setSelectedOption] = useState(null); const timer = useRef(null); const progressBar = useRef(null); useEffect(() => { progressBar.current.classList.remove("active"); setTimeout(() => { progressBar.current.classList.add("active"); }, 0); timer.current = setTimeout(() => { setAnswer(selectedOption); setSelectedOption(null); }, 10 * 1000); return () => { clearTimeout(timer.current); }; }, [question, selectedOption, setAnswer]); return ( <div className="question"> <div className="progress-bar" ref={progressBar}></div> <div className="question-count"> <b> {currentQuestion} </b> of <b> {totalQuestions} </b> </div> <div className="main"> <div className="title"> <span>Question:</span> <p>{question.title}</p> </div> <div className="options"> {question.options.map((option, index) => ( <div className={index === selectedOption ? "option active" : "option"} key={index} onClick={() => setSelectedOption(index)} > {option} </div> ))} </div> </div> <div className="control"> <button onClick={() => setAnswer(selectedOption)}>Next</button> </div> </div> ); } export default Question;
Editor is loading...
Leave a Comment