WIP: Quiz game

_pages-content/travel.md

@@ -3,35 +3,35 @@ slug: travel
 title: Getting to PyCon India 2023
 ---
 
-## Travel Information for PyCon India 2023 in Hyderabad
+# Travel Information for PyCon India 2023 in Hyderabad
 
 Welcome to PyCon India 2023 in Hyderabad! Below you'll find detailed travel information on how to reach the conference venue.
 
-### Getting to Hyderabad
+## Getting to Hyderabad
 
-#### By Plane - Rajiv Gandhi International Airport
+### By Plane - Rajiv Gandhi International Airport
 
 If you're arriving by air, the Rajiv Gandhi International Airport serves as your gateway to Hyderabad. Various Indian airlines operate flights to this airport, including Air India, Air India Express, Indian Airlines, Indigo Airlines, Trujet, and SpiceJet.
 
-#### By Train - Secunderabad or Hyderabad
+### By Train - Secunderabad or Hyderabad
 
 For those opting for train travel, Indian Railways offer services to Hyderabad from different parts of India. Major railway stations include Secunderabad, Hyderabad, Kachiguda, and Begumpet. Hyderabad Deccan Station, also known as Nampally Station, is a significant hub for trains to South and North India via Secunderabad.
 
-#### By Car
+### By Car
 
 Hyderabad is well-connected to other major cities by road. Routes like the Bangalore-Hyderabad corridor have been upgraded to four-lane divided highways, providing a convenient option for road travelers.
 
-#### By Bus
+### By Bus
 
 Hyderabad's extensive bus network, including state government and private buses, connects the city to various parts of Telangana, South India, and Western India. Major bus stations include JBS (Jubilee Bus Station) in Secunderabad and MGBS (Imliban), which holds the distinction of being one of the largest bus stations in the world.
 
 For more comprehensive travel information and options, please refer to the [Hyderabad Wiki Page](https://wikitravel.org/en/Hyderabad#Get_in).
 
-### Getting to the Conference Venue - JNTU-H, Kukatpally
+## Getting to the Conference Venue - JNTU-H, Kukatpally
 
 The conference will be held at JNTU-H, Kukatpally. Here are the different ways to reach the venue:
 
-#### Via Hyderabad Metro
+### Via Hyderabad Metro
 
 JNTU-H, Kukatpally is best accessible via the Hyderabad Metro Red line. You can get down at either the "KPHB Colony" or "JNTU College" stop and then walk towards JNTU-H, Kukatpally.
 

components/header.js

@@ -141,9 +141,15 @@ const navBarItems = [
         href: "/faq/",
         id: "faq",
         openInNewTab: false,
-      },
+      }
     ],
   },
+  {
+    name: "QuizMaster Challenge",
+    href: "/quiz-master-challenge/",
+    id: "quiz-master-challenge",
+    openInNewTab: false,
+  },
 ];
 
 export default function Header() {

components/quizGame.js

@@ -0,0 +1,64 @@
+import { useState, useEffect } from 'react';
+import Button from "./button";
+import pythonQuizzes from "../data/python-quizzes.yml";
+
+const QuizGame = () => {
+  const [score, setScore] = useState(0);
+  const [playerName, setPlayerName] = useState('');
+  const [isGameStarted, setIsGameStarted] = useState(false);
+
+  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 (
+    <div className="container py-4">
+      <h1
+        className="com-head text-center"
+        data-aos="fade-down"
+        data-aos-duration="800"
+      >
+        Welcome to QuizMaster Challenge
+      </h1>
+      <div className="row my-4 text-center">
+        <p>
+          Are you ready to put your Python knowledge to the test and prove your programming prowess?
+          This quiz game is designed to challenge your understanding of Python, its libraries, and everything in between. Get ready to dive into a world of coding questions, trivia, and fun challenges as you compete for the title of PyCon QuizMaster.
+          After the game, do not forget to share your score on social media and challenge your friends to beat your Python prowess!
+        </p>
+        <br />
+        <form className='my-2'>
+          <div className="form-group row justify-content-center">
+            <div className='col-lg-6 col-8'>
+              <input
+                type="text"
+                className="form-control"
+                id="player-name"
+                maxLength="30"
+                value={playerName}
+                onChange={(event) => setPlayerName(event.target.value)}
+                placeholder="Player Name" />
+            </div>
+          </div>
+        </form>
+        <div className="row justify-content-center">
+          <div className="col-lg-4 col-md-6 col-8">
+            <button
+              className={"custom-button w-100 px-5 my-4" + (playerName.length > 0 ? " green-btn" : " grey-btn")}
+              disabled={playerName.length == 0}
+            >
+              Challenge Accepted
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default QuizGame;

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

pages/quiz-master-challenge.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 (
+    <>
+      <Head>
+        <title>PyCon India 2023, Hyderabad | QuizMaster Challenge</title>
+      </Head>
+      <Header />
+      <QuizGame />
+      <Footer />
+    </>
+  );
+}