refactor: use SelectOptions component

src/components/Questions.tsx

@@ -3,6 +3,7 @@ import QuizModal from "./QuizModal";
 import React, { useEffect } from "react";
 
 import { QuizProps } from "../types";
+import SelectOptions from "./SelectOptions";
 
 const Questions: React.FC<QuizProps> = QuizProps => {
   const navigate = useNavigate();
@@ -20,41 +21,38 @@ const Questions: React.FC<QuizProps> = QuizProps => {
         <p>Points: {QuizProps.points}</p>
       </div>
       <h1 className="quiz-heading">Question {QuizProps.questionNumber}</h1>
-      <div className="quiz-div">
+      <div className="select-quiz-styles">
         {QuizProps.chooseAnswer ? (
           <QuizModal {...QuizProps.modalProps} />
         ) : (
-          <fieldset className="quiz-answers-div">
-            <legend>
-              <span className="sr-only">
-                Question {QuizProps.questionNumber}
-              </span>
-              {QuizProps.currQuestion.Question}
-            </legend>
-            <ul>
-              {QuizProps.choicesArr.length > 0 &&
-                QuizProps.choicesArr[QuizProps.questionNumber - 1].map(
-                  (choice: string, index: number) => (
-                    <li key={index}>
-                      <button
-                        className={`answers-btns ${choice === QuizProps.selectedOption ? `answers-btns--selected` : ``}`}
-                        onClick={() => QuizProps.selectOption(choice)}
-                      >
-                        {choice}
-                      </button>
-                    </li>
-                  )
-                )}
-            </ul>
-            <hr />
-            <button
-              className="select-btns submit-btn"
-              style={{ opacity: QuizProps.selectedOption ? 1 : 0.5 }}
-              onClick={() => QuizProps.checkAnswer()}
-            >
-              Submit
-            </button>
-          </fieldset>
+          <>
+            <fieldset className="quiz-answers-div">
+              <legend>
+                <span className="sr-only">
+                  Question {QuizProps.questionNumber}
+                </span>
+                {QuizProps.currQuestion.Question}
+              </legend>
+            </fieldset>
+            <SelectOptions
+              list={QuizProps.choicesArr[QuizProps.questionNumber - 1]}
+              groupName="answers"
+              onChange={(choice: string) => {
+                QuizProps.selectOption(choice);
+              }}
+            />
+
+            <fieldset className="quiz-answers-div">
+              <hr />
+              <button
+                className="select-btns submit-btn"
+                style={{ opacity: QuizProps.selectedOption ? 1 : 0.5 }}
+                onClick={() => QuizProps.checkAnswer()}
+              >
+                Submit
+              </button>
+            </fieldset>
+          </>
         )}
       </div>
     </>

src/components/SelectCategory.tsx

@@ -1,28 +1,21 @@
 import React from "react";
 import { CATEGORIES } from "../constants";
 import { SelectCategoryProps } from "../types";
+import SelectOptions from "./SelectOptions";
 
 const SelectCategory: React.FC<SelectCategoryProps> = SelectCategoryProps => {
   return (
     <div className="select-quiz-styles">
       <h2 className="quiz-heading">Choose a Category</h2>
-      <div className="select-btn-div">
-        {CATEGORIES.map((category: string, index: number) => (
-          <button
-            className="select-btns"
-            onClick={() => SelectCategoryProps.selectQuiz(category, index)}
-            key={index}
-          >
-            {category}
-          </button>
-        ))}
-        <button
-          className="select-btns"
-          onClick={SelectCategoryProps.startRandomQuiz}
-        >
-          Random
-        </button>
-      </div>
+      <SelectOptions
+        list={CATEGORIES}
+        groupName="categories"
+        onChange={category =>
+          category === "Random"
+            ? SelectCategoryProps.startRandomQuiz()
+            : SelectCategoryProps.selectQuiz(category, 0)
+        }
+      />
     </div>
   );
 };

src/components/SelectOptions.tsx

@@ -0,0 +1,31 @@
+const SelectOptions = ({
+  list,
+  groupName,
+  onChange
+}: {
+  list: string[];
+  groupName: string;
+  onChange: (val: string) => void;
+}) => {
+  return (
+    <ul className="select-btn-div">
+      {list.map((itm: string) => (
+        <li key={itm}>
+          <label className={"select-btns"} htmlFor={itm}>
+            <input
+              type="radio"
+              role="button"
+              id={itm}
+              name={groupName}
+              value={itm}
+              onChange={e => onChange(e.target.value)}
+            />
+
+            {itm}
+          </label>
+        </li>
+      ))}
+    </ul>
+  );
+};
+export default SelectOptions;

src/components/SelectQuestionsTotal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { QUESTION_NUMS } from "../constants";
 import { SelectQuestionsTotalProps } from "../types";
+import SelectOptions from "./SelectOptions";
 
 const SelectQuestionsTotal: React.FC<SelectQuestionsTotalProps> = ({
   totalQuestions,
@@ -13,24 +14,15 @@ const SelectQuestionsTotal: React.FC<SelectQuestionsTotalProps> = ({
   return (
     <div className="select-quiz-styles">
       <h2 className="quiz-heading">Choose a length for the Quiz</h2>
-      <div className="select-btn-div">
-        {availableQuizLengths.map((choice: number, index: number) => (
-          <button
-            className="select-btns"
-            onClick={() => startQuiz(choice)}
-            key={index}
-          >
-            {choice}
-          </button>
-        ))}
 
-        <button
-          className="select-btns"
-          onClick={() => startQuiz(totalQuestions)}
-        >
-          All ({totalQuestions})
-        </button>
-      </div>
+      <SelectOptions
+        list={[...availableQuizLengths, `All (${totalQuestions})`]}
+        groupName="QuizLengths"
+        onChange={(choice: string) => {
+          const num_choice = Number(choice.replace(/\D/g, ""));
+          startQuiz(num_choice);
+        }}
+      />
     </div>
   );
 };

src/constants.ts

@@ -31,7 +31,8 @@ export const CATEGORIES = [
   "IT",
   "Linux",
   "Python",
-  "SQL"
+  "SQL",
+  "Random"
 ];
 
 export const ALL_CATEGORIES = [

src/stylesheets/Button.css

@@ -37,10 +37,26 @@
   font-size: 25px;
 }
 
+label:has(input[type="radio"]:checked) {
+  background-color: var(--bg-answer-selected);
+}
+
 @media screen and (max-width: 480px) {
   .large-btn {
     width: 200px;
     height: 75px;
     font-size: 22px;
   }
 }
+
+ul,
+li {
+  list-style-type: none;
+  input[type="radio"] {
+    display: none;
+  }
+  label {
+    color: #0a0a23;
+    text-align: center;
+  }
+}