feat: add quiz question type, show questions

Author: Eric-Zhang-Developer

src/components/tutorial-quiz.tsx

@@ -1,11 +1,25 @@
 import { Cinzel } from "next/font/google";
+import { useState } from "react";
+import { helloWorldQuiz } from "@/data/quizzes/01-hello-world";
 const cinzel = Cinzel({ subsets: ["latin"], weight: ["700"] });
 export default function TutorialQuiz() {
+  const [questionNumber, setQuestionNumber] = useState<number>(0);
+  const currentQuestion = helloWorldQuiz.questions[questionNumber];
+
   return (
     <div className="mt-12 p-8 border-2 border-amber-800/50 rounded-xl bg-amber-50/50 shadow-inner shadow-amber-900/20">
       <h2 className={`text-3xl font-bold text-center mb-6 text-amber-900 ${cinzel.className}`}>
         Test Your Knowledge, Initiate
       </h2>
+
+      {/* Question Card */}
+      <div className="space-y-6">
+        <div className="bg-amber-200/50 p-6 rounded-lg border border-amber-800/30">
+          <h3 className="text-xl font-semibold text-amber-950 mb-4">
+            {currentQuestion.questionText}
+          </h3>
+        </div>
+      </div>
     </div>
   );
 }

src/data/quizzes/01-hello-world.ts

@@ -0,0 +1,28 @@
+import { QuizData } from "@/lib/types/types";
+
+export const helloWorldQuiz: QuizData = {
+  title: "The Oracle's First Greeting",
+  questions: [
+    {
+      questionText: "What is the primary purpose of a 'Hello World' program?",
+      options: [
+        "To summon a digital dragon",
+        "To verify that your coding environment is set up correctly",
+        "To hack into the mainframe",
+        "To write a poem for the computer",
+      ],
+      correctAnswer: "To verify that your coding environment is set up correctly",
+    },
+    {
+      questionText:
+        "True or False: 'Hello World' is only used in one specific programming language.",
+      options: ["True", "False"],
+      correctAnswer: "False",
+    },
+    {
+      questionText: "Which of the following is a common command to display text?",
+      options: ["print", "shout", "whisper", "cast_spell"],
+      correctAnswer: "print",
+    },
+  ],
+};

src/lib/types/types.ts

@@ -0,0 +1,10 @@
+export type Question = {
+  questionText: string;
+  options: string[];
+  correctAnswer: string;
+};
+
+export type QuizData = {
+  title: string;
+  questions: Question[];
+};