diff --git a/src/app/tutorial-hello-world/page.tsx b/src/app/tutorial-hello-world/page.tsx index a097547..506c19d 100644 --- a/src/app/tutorial-hello-world/page.tsx +++ b/src/app/tutorial-hello-world/page.tsx @@ -2,7 +2,10 @@ import BackToDashBoardLink from "@/components/back-to-dashboard-link"; import YouTube from "react-youtube"; -import { Cinzel } from 'next/font/google'; +import Quiz from "@/components/tutorial-quiz"; + +import { Cinzel } from "next/font/google"; +import { helloWorldQuiz } from "@/data/quizzes/01-hello-world"; const cinzel = Cinzel({ subsets: ["latin"], @@ -10,40 +13,40 @@ const cinzel = Cinzel({ }); // body text (Times New Roman= more readable) -const bodyFontClass = "font-serif text-amber-950"; +const bodyFontClass = "font-serif text-amber-950"; // titles (Cinzel font) -const cinzelTitleClass = cinzel.className; +const cinzelTitleClass = cinzel.className; export default function TutorialHelloWorld() { return ( - // Background of scroll + // Background of scroll
-
+
{/* "scroll"*/} -
- + rounded-t-[4rem] rounded-b-lg`} + > {/* title*/} -

+

Quest: The Oracle's First Greeting

- +

Welcome, brave coder! Your journey into the mystical lands of programming begins now. Before you can conjure complex spells or build mighty digital fortresses, every adventurer @@ -56,7 +59,7 @@ export default function TutorialHelloWorld() {

- + {/* section*/}

@@ -79,7 +82,7 @@ export default function TutorialHelloWorld() {

- + {/* section */}

@@ -88,27 +91,27 @@ export default function TutorialHelloWorld() {

Why start with something so simple?

  • - It's Tradition: Like a knight - receiving their first sword, programmers worldwide start here. It connects you to - generations of coders before you! + It's Tradition: Like a + knight receiving their first sword, programmers worldwide start here. It connects you + to generations of coders before you!
  • - It's a Test: Successfully making the - machine say "Hello World" proves your basic setup is working. Your coding - environment, the language you're using - they're all aligned and ready for - more complex commands. It's like checking if your magic wand sparks before trying - to levitate a mountain. + It's a Test:{" "} + Successfully making the machine say "Hello World" proves your basic setup is + working. Your coding environment, the language you're using - they're all + aligned and ready for more complex commands. It's like checking if your magic + wand sparks before trying to levitate a mountain.
  • - It's Confidence: Seeing your very - first command come to life, even a simple one, is a powerful boost! It's the - first step on your epic journey. + It's Confidence: Seeing + your very first command come to life, even a simple one, is a powerful boost! + It's the first step on your epic journey.

- +
- + {/* section*/}

@@ -124,17 +127,27 @@ export default function TutorialHelloWorld() {

Different programming languages (spellbooks) have slightly different words for the 'Display' command (like{" "} - print,{" "} - console.log,{" "} - echo), but the core - idea is the same: tell the machine to show those exact words. + + print + + ,{" "} + + console.log + + ,{" "} + + echo + + ), but the core idea is the same: tell the machine to show those exact words.

- +
+ +
); -} \ No newline at end of file +} diff --git a/src/components/tutorial-quiz.tsx b/src/components/tutorial-quiz.tsx new file mode 100644 index 0000000..6edc5f1 --- /dev/null +++ b/src/components/tutorial-quiz.tsx @@ -0,0 +1,122 @@ +import { Cinzel } from "next/font/google"; +import { useState } from "react"; +import { QuizData } from "@/lib/types/types"; + +const cinzel = Cinzel({ subsets: ["latin"], weight: ["700"] }); + +type QuizProps = { + quizData: QuizData; +}; + +export default function Quiz({ quizData }: QuizProps) { + const [questionNumber, setQuestionNumber] = useState(0); + const [selectedOption, setSelectedOption] = useState(null); + const [isCorrect, setIsCorrect] = useState(null); + const [score, setScore] = useState(0); + const [showResults, setShowResults] = useState(false); + + const currentQuestion = quizData.questions[questionNumber]; + + const handleOptionClick = (option: string) => { + if (selectedOption) return; + setSelectedOption(option); + + // 1. Check Correctness + const correct = option === currentQuestion.correctAnswer; + setIsCorrect(correct); + + // 2. Update Score + if (correct) { + setScore((prev) => prev + 1); + } + + // 3. Auto-advance timer + setTimeout(() => { + const nextIndex = questionNumber + 1; + + if (nextIndex < quizData.questions.length) { + setQuestionNumber(nextIndex); + setSelectedOption(null); + setIsCorrect(null); + } else { + setShowResults(true); + } + }, 2000); // 2 second delay so they can read the feedback + }; + + const resetQuiz = () => { + setQuestionNumber(0); + setScore(0); + setShowResults(false); + setSelectedOption(null); + setIsCorrect(null); + }; + + return ( +
+

+ {quizData.title} +

+ + {showResults ? ( +
+ {/* Results */} +

Quest Complete!

+

+ You scored {score} out of{" "} + {quizData.questions.length} +

+ +
+ ) : ( +
+ {/* Score Tracker Display */} +
+ + Question {questionNumber + 1} of {quizData.questions.length} + + Score: {score} +
+ +
+

+ {currentQuestion.questionText} +

+ +
+ {currentQuestion.options.map((option) => { + let buttonStyle = "bg-white hover:bg-amber-100 border-amber-300 text-amber-900"; + + if (selectedOption === option) { + buttonStyle = isCorrect + ? "bg-green-200 border-green-500 text-green-900 font-bold" + : "bg-red-200 border-red-500 text-red-900 font-bold"; + } else if (selectedOption && option === currentQuestion.correctAnswer) { + buttonStyle = "bg-green-100 border-green-300 text-green-800 opacity-75"; + } + + return ( + + ); + })} +
+
+
+ )} +
+ ); +} diff --git a/src/data/quizzes/01-hello-world.ts b/src/data/quizzes/01-hello-world.ts new file mode 100644 index 0000000..225247b --- /dev/null +++ b/src/data/quizzes/01-hello-world.ts @@ -0,0 +1,72 @@ +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", + }, + { + questionText: + "In the tutorial, teaching the computer to say 'Hello World' is compared to what analogy?", + options: [ + "Training a dragon to fly", + "Teaching a parrot its first words", + "Building a fortress from scratch", + "Brewing a complex potion", + ], + correctAnswer: "Teaching a parrot its first words", + }, + { + questionText: + "Which of these commands was NOT mentioned as a way to display text in different languages?", + options: ["console.log", "echo", "print", "shout_loudly"], + correctAnswer: "shout_loudly", + }, + { + questionText: "Why is the 'Hello World' program considered a 'tradition'?", + options: [ + "It connects you to generations of coders before you", + "It requires a high-level wizard to perform", + "It is the only program that never has bugs", + "It costs gold coins to run", + ], + correctAnswer: "It connects you to generations of coders before you", + }, + { + questionText: + "What does the 'Hello World' program prove about your 'magic wand' (coding setup)?", + options: [ + "That it can levitate mountains", + "That it is broken", + "That it sparks and is ready for more complex commands", + "That it needs to be recharged", + ], + correctAnswer: "That it sparks and is ready for more complex commands", + }, + { + questionText: + "True or False: Even though the command looks different in different languages (like 'echo' or 'console.log'), the core idea is always to display the specific words.", + options: ["True", "False"], + correctAnswer: "True", + }, + ], +}; diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts new file mode 100644 index 0000000..03883c5 --- /dev/null +++ b/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[]; +};