feat: add quiz-builder.jsx solution

Author: kaylakremer

solutions/quiz-builder.jsx

@@ -0,0 +1,130 @@
+import React, { useState, useMemo } from "react"
+import { createRoot } from "react-dom/client"
+
+const style = {
+    container: {
+        padding: "20px",
+        border: "1px solid #E0E0E0",
+        borderRadius: "15px",
+        width: "max-content",
+        marginBottom: "40px",
+    },
+    question: {
+        fontWeight: "bold",
+        marginBottom: "10px",
+    },
+    options: {
+        marginBottom: "5px",
+    },
+    button: {
+        marginTop: "10px",
+        padding: "10px 15px",
+        border: "none",
+        backgroundColor: "#007BFF",
+        color: "#FFF",
+        fontSize: "14px",
+        borderRadius: "5px",
+        cursor: "pointer",
+    },
+    feedback: {
+        marginTop: "10px",
+        fontSize: "14px",
+    },
+}
+
+const QuizOption = ({ option, index, answer, setAnswer }) => {
+    const onChange = ({ target: { value } }) => setAnswer(value)
+    return (
+        <>
+            <input
+                type="radio"
+                onChange={onChange}
+                checked={option === answer}
+                name="answers"
+                value={option}
+                id={`option${index}`}
+            />
+            <label htmlFor={option}>{option}</label>
+        </>
+    )
+}
+
+function QuizApp() {
+    // do not modify the questions or answers below
+    const questions = useMemo(
+        () => [
+            {
+                question: "What is the capital of France?",
+                options: ["London", "Paris", "Berlin", "Madrid"],
+                correct: "Paris",
+            },
+            {
+                question: "What is the capital of Germany?",
+                options: ["Berlin", "Munich", "Frankfurt", "Hamburg"],
+                correct: "Berlin",
+            },
+        ],
+        []
+    )
+
+    const questionsTotal = useMemo(() => questions.length, [questions])
+
+    const [questionsIndex, setQuestionsIndex] = useState(0)
+    const [score, setScore] = useState(0)
+    const [feedback, setFeedback] = useState(null)
+    const [answer, setAnswer] = useState(null)
+    const [completedQuiz, setCompletedQuiz] = useState(false)
+
+    const submit = () => {
+        if (answer === questions[questionsIndex].correct) {
+            setScore(score + 1)
+            setFeedback("Correct!")
+        } else {
+            setFeedback("Incorrect!")
+        }
+
+        if (questionsIndex === questionsTotal - 1) {
+            setCompletedQuiz(true)
+        } else {
+            setQuestionsIndex(questionsIndex + 1)
+            setAnswer(null)
+        }
+    }
+
+    return (
+        <div style={style.container}>
+            <div id="question" style={style.question}>
+                {`${questions[questionsIndex].question}`}
+            </div>
+            <div style={style.options}>
+                {questions[questionsIndex].options.map((option, index) => (
+                    <QuizOption
+                        key={`option-${index}`}
+                        option={option}
+                        index={index}
+                        answer={answer}
+                        setAnswer={setAnswer}
+                    />
+                ))}
+            </div>
+            <button
+                disabled={completedQuiz}
+                style={style.button}
+                id="submitBtn"
+                onClick={submit}
+            >
+                Submit
+            </button>
+            <div id="feedback" style={style.feedback}>
+                {questionsIndex !== 0 && !completedQuiz && `${feedback}`}
+            </div>
+            <div id="score" style={style.feedback}>
+                {completedQuiz &&
+                    `Quiz complete! You scored ${score} out of ${questions.length}!`}
+            </div>
+        </div>
+    )
+}
+
+const root = createRoot(document.getElementById("root"))
+root.render(<QuizApp />)