From 5ceb80c6e6a8d2c4c9cb3d0a98dfc7fbc33b5898 Mon Sep 17 00:00:00 2001 From: Rajat Rajdeep Date: Sat, 9 Sep 2023 23:51:02 +0530 Subject: [PATCH 1/3] Initiate Quiz Game --- components/header.js | 8 +++++++- components/quizGame.js | 24 ++++++++++++++++++++++++ data/python-quizzes.yml | 24 ++++++++++++++++++++++++ pages/quiz-game.tsx | 17 +++++++++++++++++ 4 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 components/quizGame.js create mode 100644 data/python-quizzes.yml create mode 100644 pages/quiz-game.tsx diff --git a/components/header.js b/components/header.js index f3f7c8d..3c9e2b1 100644 --- a/components/header.js +++ b/components/header.js @@ -141,9 +141,15 @@ const navBarItems = [ href: "/faq/", id: "faq", openInNewTab: false, - }, + } ], }, + { + name: "Quiz Game", + href: "/quiz-game/", + id: "quiz-game", + openInNewTab: false, + }, ]; export default function Header() { diff --git a/components/quizGame.js b/components/quizGame.js new file mode 100644 index 0000000..74be2c1 --- /dev/null +++ b/components/quizGame.js @@ -0,0 +1,24 @@ +import { useState, useEffect } from 'react'; +import pythonQuizzes from "../data/python-quizzes.yml"; + +const QuizGame = () => { + const [score, setScore] = useState(0); + const [timerKey, setTimerKey] = useState(0); + + const handleAnswerClick = (isCorrect) => { + if (isCorrect) { + // Award 10 points for correct answer + setScore(score + 10); + // Reset the timer and move to the next question + setTimerKey(timerKey + 1); + } + }; + + return ( +
+ +
+ ); +}; + +export default QuizGame; diff --git a/data/python-quizzes.yml b/data/python-quizzes.yml new file mode 100644 index 0000000..6112a2f --- /dev/null +++ b/data/python-quizzes.yml @@ -0,0 +1,24 @@ +- question: "What is the capital of France?" + answers: + - text: "Paris" + isCorrect: true + - text: "London" + isCorrect: false + - text: "Berlin" + isCorrect: false +- question: "What is the capital of France?" + answers: + - text: "Paris" + isCorrect: true + - text: "London" + isCorrect: false + - text: "Berlin" + isCorrect: false +- question: "What is the capital of France?" + answers: + - text: "Paris" + isCorrect: true + - text: "London" + isCorrect: false + - text: "Berlin" + isCorrect: false diff --git a/pages/quiz-game.tsx b/pages/quiz-game.tsx new file mode 100644 index 0000000..c30bf0f --- /dev/null +++ b/pages/quiz-game.tsx @@ -0,0 +1,17 @@ +import Head from "next/head"; +import QuizGame from "../components/quizGame"; +import Header from "../components/header"; +import Footer from "../components/footer"; + +export default function QuizGamePage() { + return ( + <> + + PyCon India 2023, Hyderabad | Quiz Game + +
+ +