Quiz app - NEXT.js (Avdhesh-Varshney#582)

* Create README.md * added files * Update Next.js README.md
amanver45 · Jul 20, 2024 · fc28ed7 · fc28ed7
1 parent 182675c
commit fc28ed7
Show file tree

Hide file tree

Showing 18 changed files with 363 additions and 2 deletions.
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/README.md b/Next-JS-Projects/Intermediate/Quiz-App/README.md
@@ -0,0 +1,78 @@
+<h1 align='center'><b>💥 QUIZ APP 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+    <img alt="Static Badge" src="https://img.shields.io/badge/next.js-red?style=for-the-badge&logo=next.js">
+    <img alt="Static Badge" src="https://img.shields.io/badge/Tailwind%20css-blue?style=for-the-badge&logo=tailwind%20css&logoColor=white">
+    <img alt="Static Badge" src="https://img.shields.io/badge/javascript-yellow?style=for-the-badge&logo=javascript&logoColor=black">
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+- This is a quiz application that allows users to practice quizzes in different programming languages.
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+1. Fork the repository.
+
+2. Clone the project.
+
+```
+git clone repository-url
+```
+
+3. Install dependencies.
+
+```
+npm install
+```
+
+4. Run the server.
+
+```
+npm run dev
+```
+
+5. Browse the website by hitting `localhost:3000` on a web browser.
+
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+
+<img src="./images/home.png" />
+
+<img src="./images/quiz.png" />
+
+<img src="./images/results.png" />
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>DHARSHI B.</i></b> 👩</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/dharshi-balasubramaniyam-47b193243'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/DharshiBalasubramaniyam'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/app/globals.css b/Next-JS-Projects/Intermediate/Quiz-App/app/globals.css
@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: rgb(0, 0, 86);
+    color: white;
+}
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/app/layout.js b/Next-JS-Projects/Intermediate/Quiz-App/app/layout.js
@@ -0,0 +1,31 @@
+import "./globals.css";
+
+export const metadata = {
+  title: "Quiz Place",
+  description: "Practice quizes for several programming languages."
+};
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link 
+          rel="preconnect" 
+          href="https://fonts.googleapis.com" 
+        />
+        <link 
+          rel="preconnect" 
+          href="https://fonts.gstatic.com" 
+          crossorigin 
+        />
+        <link 
+          href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" 
+          rel="stylesheet" 
+        />
+      </head>
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/app/page.js b/Next-JS-Projects/Intermediate/Quiz-App/app/page.js
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import categories from "../public/categories.json"
+
+export default function Home() {
+
+  return (
+
+    <div 
+      className="max-w-xl mx-auto mt-8 p-8 border-2 border-blue-600 rounded relative text-center"
+    >
+      <h1 
+        className="text-4xl font-bold"
+      >
+        Quiz Place
+      </h1>
+      <p 
+        className="my-8"
+      >
+        Are you ready to test your knowledge and skills in various programming languages? Quiz Place offers a fun and interactive way to challenge yourself with quizzes.
+      </p>
+      <div 
+        className="flex gap-3 flex-shrink flex-grow flex-wrap items-center w-full justify-center"
+      >
+        {
+          categories.map((category) => {
+            return (
+              <Link 
+                href={`/quiz/${category.id}`}
+              >
+                <button 
+                  className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 uppercase"
+                >
+                  {category.name}
+                </button>
+              </Link>
+            )
+          })
+        }
+      </div>
+
+    </div>
+  );
+}
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/app/quiz/[id]/page.js b/Next-JS-Projects/Intermediate/Quiz-App/app/quiz/[id]/page.js
@@ -0,0 +1,57 @@
+"use client";
+
+import { useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import questions from '../../../public/questions.json';
+
+export default function Quiz() {
+
+    const { id } = useParams();
+    const quiz = questions.filter((q) => q.category === id);
+    const [currentQuestion, setCurrentQuestion] = useState(0);
+    const [score, setScore] = useState(0);
+    const router = useRouter();
+
+    const handleAnswerClick = (answer) => {
+        if (answer === quiz[currentQuestion].answer) {
+          setScore(score + 1);
+        }
+
+        const nextQuestion = currentQuestion + 1;
+        if (nextQuestion < quiz.length) {
+          setCurrentQuestion(nextQuestion);
+        } else {
+            router.push(`/results?score=${score + 1}&total=${quiz.length}`)
+        }
+    };
+
+    return (
+        <div 
+            className="max-w-xl mx-auto mt-8 p-8 border-2 border-blue-600 rounded relative"
+        >
+            <h3 
+                className='mb-2 absolute -top-5 right-5 py-2 px-5 bg-blue-600 text-white rounded-full'
+            >
+                Question {currentQuestion+1} of {quiz.length}
+            </h3>
+            <h2 
+                className="text-xl font-bold mb-4"
+            >
+                {quiz[currentQuestion].question}
+            </h2>
+            <div 
+                className="space-y-2"
+            >
+                {quiz[currentQuestion].options.map((option, index) => (
+                    <button
+                        key={index}
+                        onClick={() => handleAnswerClick(option)}
+                        className="w-full border-2 border-blue-600 p-2 rounded hover:bg-blue-600 text-white text-left"
+                    >
+                        {option}
+                    </button>
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/app/results/page.js b/Next-JS-Projects/Intermediate/Quiz-App/app/results/page.js
@@ -0,0 +1,36 @@
+'use client';
+
+import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
+
+const ResultsPage = () => {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const score = searchParams.get('score');
+    const total = searchParams.get('total');
+
+    return (
+        <div 
+            className="max-w-xl mx-auto mt-8 text-center p-8 border-2 border-blue-600 rounded"
+        >
+            <h2 
+                className="text-2xl font-bold"
+            >
+                Your Score: {score}/{total}
+            </h2>
+            <p 
+                className="mt-4"
+            >
+                Thanks for taking the quiz!
+            </p>
+            <button
+                onClick={() => router.push('/')}
+                className="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
+            >
+                Go Home
+            </button>
+        </div>
+    );
+};
+
+export default ResultsPage;
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/images/home.png b/Next-JS-Projects/Intermediate/Quiz-App/images/home.png
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/images/quiz.png b/Next-JS-Projects/Intermediate/Quiz-App/images/quiz.png
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/images/results.png b/Next-JS-Projects/Intermediate/Quiz-App/images/results.png
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/jsconfig.json b/Next-JS-Projects/Intermediate/Quiz-App/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/next.config.mjs b/Next-JS-Projects/Intermediate/Quiz-App/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/package.json b/Next-JS-Projects/Intermediate/Quiz-App/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "quizplace",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.5"
+  },
+  "devDependencies": {
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1"
+  }
+}
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/postcss.config.mjs b/Next-JS-Projects/Intermediate/Quiz-App/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/public/categories.json b/Next-JS-Projects/Intermediate/Quiz-App/public/categories.json
@@ -0,0 +1,11 @@
+[
+    { "id": "html", "name": "HTML" },
+    { "id": "css", "name": "CSS" },
+    { "id": "javascript", "name": "JavaScript" },
+    { "id": "python", "name": "Python" },
+    { "id": "java", "name": "Java" },
+    { "id": "react", "name": "React" },
+    { "id": "php", "name": "PHP" },
+    { "id": "c", "name": "C" }
+  ]
+
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/public/questions.json b/Next-JS-Projects/Intermediate/Quiz-App/public/questions.json
@@ -0,0 +1,41 @@
+[
+  { "question": "What does HTML stand for?", "options": ["HyperText Markup Language", "HighText Machine Language", "Hyperlink and Text Markup Language", "None of the above"], "answer": "HyperText Markup Language", "category": "html" },
+  { "question": "What is the correct HTML element for inserting a line break?", "options": ["<break>", "<lb>", "<br>", "<line>"], "answer": "<br>", "category": "html" },
+  { "question": "Which HTML attribute specifies an alternate text for an image, if the image cannot be displayed?", "options": ["alt", "title", "src", "href"], "answer": "alt", "category": "html" },
+  { "question": "Which HTML tag is used to define an internal style sheet?", "options": ["<style>", "<css>", "<script>", "<link>"], "answer": "<style>", "category": "html" },
+
+  { "question": "What does CSS stand for?", "options": ["Cascading Style Sheets", "Colorful Style Sheets", "Computer Style Sheets", "Creative Style Sheets"], "answer": "Cascading Style Sheets", "category": "css" },
+  { "question": "How do you select an element with the class name 'example' in CSS?", "options": [".example", "#example", "example", "*example"], "answer": ".example", "category": "css" },
+  { "question": "Which CSS property controls the text size?", "options": ["font-size", "text-size", "font-style", "text-style"], "answer": "font-size", "category": "css" },
+  { "question": "How do you make a list that lists items horizontally in CSS?", "options": ["list-style: horizontal", "display: inline", "list-style-type: horizontal", "float: left"], "answer": "display: inline", "category": "css" },
+
+  { "question": "What is the output of `typeof NaN` in JavaScript?", "options": ["number", "NaN", "undefined", "object"], "answer": "number", "category": "javascript" },
+  { "question": "Which method removes the last element from an array and returns it?", "options": ["pop()", "push()", "shift()", "unshift()"], "answer": "pop()", "category": "javascript" },
+  { "question": "What does `JSON.stringify()` do?", "options": ["Converts a JavaScript object to a JSON string", "Parses a JSON string to a JavaScript object", "Converts a string to a JavaScript object", "Stringifies a JavaScript function"], "answer": "Converts a JavaScript object to a JSON string", "category": "javascript" },
+  { "question": "Which keyword is used to declare a variable that cannot be reassigned?", "options": ["let", "var", "const", "static"], "answer": "const", "category": "javascript" },
+
+  { "question": "What is the output of `print(2 ** 3)` in Python?", "options": ["8", "9", "6", "3"], "answer": "8", "category": "python" },
+  { "question": "How do you create a function in Python?", "options": ["def functionName():", "function functionName():", "create functionName():", "functionName():"], "answer": "def functionName():", "category": "python" },
+  { "question": "What is the correct way to write a list in Python?", "options": ["list = [1, 2, 3]", "list = (1, 2, 3)", "list = {1, 2, 3}", "list = 1, 2, 3"], "answer": "list = [1, 2, 3]", "category": "python" },
+  { "question": "How do you insert a comment in Python?", "options": ["// comment", "# comment", "/* comment */", "<!-- comment -->"], "answer": "# comment", "category": "python" },
+
+  { "question": "Which of these is a correct way to declare a variable in Java?", "options": ["int x = 10;", "x = 10;", "var x = 10;", "let x = 10;"], "answer": "int x = 10;", "category": "java" },
+  { "question": "What is the default value of a boolean variable in Java?", "options": ["true", "false", "0", "null"], "answer": "false", "category": "java" },
+  { "question": "What is the correct way to create an array in Java?", "options": ["int[] arr = new int[5];", "int arr = new int[5];", "array arr = new int[5];", "int arr[] = new int[5];"], "answer": "int[] arr = new int[5];", "category": "java" },
+  { "question": "Which keyword is used to prevent a method from being overridden in Java?", "options": ["static", "final", "private", "protected"], "answer": "final", "category": "java" },
+
+  { "question": "Which of these is a popular React library for state management?", "options": ["Redux", "jQuery", "Lodash", "Axios"], "answer": "Redux", "category": "react" },
+  { "question": "How do you create a functional component in React?", "options": ["function MyComponent() {}", "class MyComponent extends React.Component {}", "function MyComponent = () => {}", "const MyComponent = class {}"], "answer": "function MyComponent() {}", "category": "react" },
+  { "question": "Which hook is used to manage state in a functional component?", "options": ["useState", "useEffect", "useReducer", "useContext"], "answer": "useState", "category": "react" },
+  { "question": "How do you pass data from a parent component to a child component in React?", "options": ["props", "state", "context", "refs"], "answer": "props", "category": "react" },
+
+  { "question": "How do you declare a variable in PHP?", "options": ["$variable = value;", "var variable = value;", "let variable = value;", "const variable = value;"], "answer": "$variable = value;", "category": "php" },
+  { "question": "Which PHP function is used to get the length of a string?", "options": ["strlen()", "length()", "str_length()", "get_length()"], "answer": "strlen()", "category": "php" },
+  { "question": "How do you concatenate strings in PHP?", "options": ["string1 . string2", "concat(string1, string2)", "string1 + string2", "combine(string1, string2)"], "answer": "string1 . string2", "category": "php" },
+  { "question": "Which PHP function is used to include another file?", "options": ["include()", "require()", "import()", "include_file()"], "answer": "include()", "category": "php" },
+
+  { "question": "Which of the following is a valid variable declaration in C?", "options": ["int x = 10;", "x = 10;", "var x = 10;", "let x = 10;"], "answer": "int x = 10;", "category": "c" },
+  { "question": "What does the `printf` function do in C?", "options": ["Prints formatted output to the console", "Reads input from the user", "Allocates memory", "Declares a variable"], "answer": "Prints formatted output to the console", "category": "c" },
+  { "question": "How do you declare a constant in C?", "options": ["const int x = 10;", "#define x 10", "int x = 10;", "constant int x = 10;"], "answer": "const int x = 10;", "category": "c" },
+  { "question": "Which header file is required for using `printf` in C?", "options": ["<stdio.h>", "<stdlib.h>", "<string.h>", "<math.h>"], "answer": "<stdio.h>", "category": "c" }
+]
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/screenshot.webp b/Next-JS-Projects/Intermediate/Quiz-App/screenshot.webp
diff --git a/Next-JS-Projects/Intermediate/Quiz-App/tailwind.config.js b/Next-JS-Projects/Intermediate/Quiz-App/tailwind.config.js
@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Poppins', 'sans-serif'],
+      }
+    },
+  },
+  plugins: [],
+};
diff --git a/Next-JS-Projects/README.md b/Next-JS-Projects/README.md
@@ -26,7 +26,7 @@
 | S.No | Project Name | Category |
 |------|--------------|----------|
 |  1   | [Weather-Website](./Basic/Weather-Website) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |
-|  2   |  |  |
+|  2   | [Quiz-App](./Intermediate/Quiz-App) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) |
 
 
 
@@ -38,4 +38,4 @@
 <div align="center">
 	<h3>Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
 </div>
-<a href="#top"><img src="https://img.shields.io/badge/-Back%20to%20Top-red?style=for-the-badge" align="right"/></a>
+<a href="#top"><img src="https://img.shields.io/badge/-Back%20to%20Top-red?style=for-the-badge" align="right"/></a>