kunjgit · kunjgit · Jun 10, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/Games/Intellect Quest/index.html b/Games/Intellect Quest/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Intellect Quest</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div id="quiz-container">
+        <h1>Intellect Quest</h1>
+        <div id="question-container">
+            <div id="question"></div>
+            <div id="answer-buttons" class="btn-container"></div>
+        </div>
+        <button id="next-button" class="btn hide">Next</button>
+        <div id="result-container" class="hide">
+            <h2>Your Score: <span id="score"></span></h2>
+            <button id="restart-button" class="btn">Restart</button>
+        </div>
+        <div id="loader" class="hide">Loading...</div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Intellect Quest/readme.md b/Games/Intellect Quest/readme.md
@@ -0,0 +1,27 @@
+### 🎮 Game Request
+
+<h2>Game logic and basic description:</h2>
+
+<li>This game is created with the help of html, css and javascript.</li>
+<li>You can play whenever and wherever you want</li>
+<li>You will get to know the correct answer of every question once you answer it</li>
+
+
+### Point down the features
+
+<h2>Game points</h2>
+
+<ol>
+<li>Answer the questions</li>
+<li>Show correct answer with green, and wrong answers with red</li>
+<li>Option to go to next question</li>
+</ol>
+
+
+### Select The Game Type
+
+Single Player
+
+### Pictures
+
+![Game screen](https://github.com/kunjgit/GameZone/assets/138088550/79592ab5-f2dd-412f-8f74-286dbb147108)
diff --git a/Games/Intellect Quest/script.js b/Games/Intellect Quest/script.js
@@ -0,0 +1,112 @@
+const questionContainer = document.getElementById('question-container');
+const questionElement = document.getElementById('question');
+const answerButtonsElement = document.getElementById('answer-buttons');
+const nextButton = document.getElementById('next-button');
+const resultContainer = document.getElementById('result-container');
+const scoreElement = document.getElementById('score');
+const restartButton = document.getElementById('restart-button');
+const loader = document.getElementById('loader');
+
+let questions = [];
+let currentQuestionIndex, score;
+
+async function fetchQuestions() {
+    loader.classList.remove('hide');
+    try {
+        const response = await fetch('https://opentdb.com/api.php?amount=10&type=multiple');
+        const data = await response.json();
+        questions = data.results.map((question) => {
+            const formattedQuestion = {
+                question: question.question,
+                answers: [...question.incorrect_answers.map(answer => ({ text: answer, correct: false }))]
+            };
+            formattedQuestion.answers.push({ text: question.correct_answer, correct: true });
+            return formattedQuestion;
+        });
+        startQuiz();
+    } catch (error) {
+        console.error('Error fetching questions:', error);
+    } finally {
+        loader.classList.add('hide');
+    }
+}
+
+function startQuiz() {
+    currentQuestionIndex = 0;
+    score = 0;
+    resultContainer.classList.add('hide');
+    nextButton.classList.remove('hide');
+    questionContainer.classList.remove('hide');
+    setNextQuestion();
+}
+
+function setNextQuestion() {
+    resetState();
+    showQuestion(questions[currentQuestionIndex]);
+}
+
+function showQuestion(question) {
+    questionElement.innerHTML = question.question;
+    question.answers.forEach(answer => {
+        const button = document.createElement('button');
+        button.innerText = answer.text;
+        button.classList.add('btn');
+        if (answer.correct) {
+            button.dataset.correct = answer.correct;
+        }
+        button.addEventListener('click', selectAnswer);
+        answerButtonsElement.appendChild(button);
+    });
+}
+
+function resetState() {
+    nextButton.classList.add('hide');
+    while (answerButtonsElement.firstChild) {
+        answerButtonsElement.removeChild(answerButtonsElement.firstChild);
+    }
+}
+
+function selectAnswer(e) {
+    const selectedButton = e.target;
+    const correct = selectedButton.dataset.correct === 'true';
+    if (correct) {
+        score++;
+    }
+    Array.from(answerButtonsElement.children).forEach(button => {
+        setStatusClass(button, button.dataset.correct === 'true');
+    });
+    nextButton.classList.remove('hide');
+}
+
+function setStatusClass(element, correct) {
+    clearStatusClass(element);
+    if (correct) {
+        element.classList.add('correct');
+    } else {
+        element.classList.add('wrong');
+    }
+}
+
+function clearStatusClass(element) {
+    element.classList.remove('correct');
+    element.classList.remove('wrong');
+}
+
+function showResult() {
+    questionContainer.classList.add('hide');
+    resultContainer.classList.remove('hide');
+    scoreElement.innerText = score;
+}
+
+nextButton.addEventListener('click', () => {
+    if (questions.length > currentQuestionIndex + 1) {
+        currentQuestionIndex++;
+        setNextQuestion();
+    } else {
+        showResult();
+    }
+});
+
+restartButton.addEventListener('click', fetchQuestions);
+
+fetchQuestions();
diff --git a/Games/Intellect Quest/style.css b/Games/Intellect Quest/style.css
@@ -0,0 +1,57 @@
+body {
+    font-family: Arial, sans-serif;
+    background: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+#quiz-container {
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: 300px;
+    padding: 20px;
+    text-align: center;
+}
+
+.btn {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+}
+
+.btn:hover {
+    background-color: #0056b3;
+}
+
+.btn-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.btn-container .btn {
+    margin: 5px 0;
+}
+
+.hide {
+    display: none;
+}
+
+.correct {
+    background-color: #28a745 !important;
+}
+
+.wrong {
+    background-color: #dc3545 !important;
+}
+
+#loader {
+    font-size: 18px;
+}
diff --git a/assets/images/Screenshot 2024-06-05 170922.png b/assets/images/Screenshot 2024-06-05 170922.png