Skip to content

Commit

Permalink
feat: Added Quiz Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@SohamMondal88
SohamMondal88 committed Jan 19, 2025
1 parent d107368 commit c5fd704
Show file tree
Hide file tree
Showing 5 changed files with 709 additions and 3 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
</ul>
</li>
<li><a href="#resources">Resources</a></li>
<li><a href="#quiz">Quiz</a></li>
<li><a href="quiz.html">Quiz</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contribute">Contribute</a></li>
</ul>
Expand Down
121 changes: 121 additions & 0 deletions quiz.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HackeRZGuide - Weekly Quiz Guide">
<title>HackeRZGuide - Weekly Quiz Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="quizstyle.css">
</head>
<body>
<header>
<nav class="navbar">

<div class="logo">
<a href="index.html">HackeRZGuide</a>
</div>


<div class="nav-container">
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li class="dropdown">
<a href="#categories" class="dropdown-toggle">Categories</a>
<ul class="dropdown-menu">
<li><a href="#hacking">Hacking</a></li>
<li><a href="#coding">Coding</a></li>
<li><a href="#tech">Tech Trends</a></li>
</ul>
</li>
<li><a href="#resources">Resources</a></li>
<li><a href="quiz.html">Quiz</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contribute">Contribute</a></li>
</ul>


<div class="search-bar">
<input type="text" placeholder="Search..." aria-label="Search">
</div>
</div>
</nav>
</header>


<div class="hero">
<h1>⚡ Welcome to the HackerZGuide Quiz! ⚡</h1>
<p>Challenge your mind, earn rewards, and show off your skills!</p>
<button id="startQuiz">Start Quiz</button>
<div class="quiz-info">
<h2>Quiz Details</h2>
<p>⏳ Duration: 3 minutes</p>
<p>📋 Questions: 3</p>
<p>💡 Difficulty: Easy</p>
</div>
</div>

<div id="quizContainer" class="hidden">
<div class="timer-container">
<h2>Time Remaining: <span id="timeRemaining">3:00</span></h2>
</div>
<div id="questionSection">
<h2 id="questionTitle" aria-live="polite">Question Title</h2>
<p id="questionText"></p>
<div id="answerOptions"></div>
</div>
<div id="progressTracker">
<div id="progressBar"></div>
</div>
<button id="submitQuiz" class="btn hidden">Submit Quiz</button>
</div>

<section id="resultSection" class="hidden">
<h2>🎉 Your Results 🎉</h2>
<p id="scoreDisplay"></p>
<div id="reviewAnswers">
<h3>Review Your Answers:</h3>
<ul id="answerReview"></ul>
</div>
<div id="leaderboard">
<h3>📊 Leaderboard</h3>
<ul id="leaderboardList"></ul>
<form id="submitScoreForm">
<label for="username">Enter Your Name: </label>
<input type="text" id="username" required>
<button type="submit">Submit Score</button>
</form>
<div id="socialShare" class="hidden">
<h3>📢 Share Your Score!</h3>
<div class="social-icons">
<a id="shareFacebook" class="social-icon" title="Share on Facebook"><i class="fab fa-facebook"></i></a>
<a id="shareTwitter" class="social-icon" title="Share on Twitter"><i class="fab fa-twitter"></i></a>
<a id="shareWhatsApp" class="social-icon" title="Share on WhatsApp"><i class="fab fa-whatsapp"></i></a>
<a id="shareLinkedIn" class="social-icon" title="Share on LinkedIn"><i class="fab fa-linkedin"></i></a>
<a id="shareInstagram" class="social-icon" title="Share on Instagram"><i class="fab fa-instagram"></i></a>
<a id="shareGitHub" class="social-icon" title="Share on GitHub"><i class="fab fa-github"></i></a>
</div>
<div id="feedbackSection" class="hidden">
<h3>Thank you for submitting your score!</h3>
<button id="restartQuiz" class="btn">Restart Quiz</button>
</div>
</div>
</section>

<footer>
<div class="social-media">
<h3>Follow Us:</h3>
<a href="https://www.facebook.com/thecodebird" class="social-icon1" title="Facebook"><i class="fab fa-facebook"></i></a>
<a href="https://x.com/TheCodeBird" class="social-icon1" title="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://wa.me/+91XXXXXXXXXX" class="social-icon1" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
<a href="https://www.linkedin.com/company/thecodebird" class="social-icon1" title="LinkedIn"><i class="fab fa-linkedin"></i></a>
<a href="https://www.instagram.com/thecodebird.exe" class="social-icon1" title="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://github.com/shuvadeepmondal" class="social-icon1" title="GitHub"><i class="fab fa-github"></i></a>
</div>
<p>&copy; 2025 HackeRZGuide. All rights reserved.</p>
</footer>

<script src="quizscript.js"></script>

</body>
</html>
146 changes: 146 additions & 0 deletions quizscript.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
const questions = [
{
title: "What is the capital of France?",
text: "This city is also known as the City of Light.",
options: ["Berlin", "Madrid", "Paris", "Lisbon"],
correct: 2,
},
{
title: "What is 2 + 2?",
text: "Basic Math skills are key!",
options: ["3", "4", "5", "6"],
correct: 1,
},
{
title: "Which planet is known as the Red Planet?",
text: "It is the fourth planet from the sun.",
options: ["Earth", "Mars", "Jupiter", "Venus"],
correct: 1,
},
];

let score = 0;
let currentQuestionIndex = 0;
let timer;
let timeRemaining = 180;

document.getElementById("startQuiz").addEventListener("click", startQuiz);
document.getElementById("submitQuiz").addEventListener("click", endQuiz);
document.getElementById("restartQuiz").addEventListener("click", restartQuiz);
document.getElementById("submitScoreForm").addEventListener("submit", submitScore);

function startQuiz() {
document.querySelector(".hero").classList.add("hidden");
document.getElementById("quizContainer").classList.remove("hidden");
startTimer();
loadQuestion();
}

function restartQuiz() {
score = 0;
currentQuestionIndex = 0;
timeRemaining = 180;
document.querySelector(".hero").classList.add("hidden");
document.getElementById("quizContainer").classList.remove("hidden");
document.getElementById("resultSection").classList.add("hidden");
document.getElementById("submitQuiz").classList.add("hidden");

startTimer();
loadQuestion();
}

function startTimer() {
timer = setInterval(() => {
timeRemaining--;
const minutes = Math.floor(timeRemaining / 60);
const seconds = timeRemaining % 60;
document.getElementById("timeRemaining").innerText = `${minutes}:${seconds.toString().padStart(2, "0")}`;
if (timeRemaining <= 0) {
clearInterval(timer);
endQuiz();
}
}, 1000);
}

function loadQuestion() {
const question = questions[currentQuestionIndex];
document.getElementById("questionTitle").innerText = question.title;
document.getElementById("questionText").innerText = question.text;

const answerOptions = document.getElementById("answerOptions");
answerOptions.innerHTML = "";

question.options.forEach((option, index) => {
const button = document.createElement("button");
button.innerText = option;
button.classList.add("answer-btn");
button.addEventListener("click", () => selectAnswer(index));
answerOptions.appendChild(button);
});
updateProgressBar();
document.getElementById("nextQuestion").classList.add("hidden"); // Hide next button until an answer is selected
}

function selectAnswer(selectedIndex) {
const correctIndex = questions[currentQuestionIndex].correct;
const buttons = document.querySelectorAll(".answer-btn");
buttons.forEach((button, index) => {
button.disabled = true;
if (index === correctIndex) button.classList.add("correct-answer");
else if (index === selectedIndex) button.classList.add("incorrect-answer");
});
if (selectedIndex === correctIndex) score++;
currentQuestionIndex++;
setTimeout(() => {
if (currentQuestionIndex < questions.length) loadQuestion();
else document.getElementById("submitQuiz").classList.remove("hidden");
}, 2000);

}

function updateProgressBar() {
const progressBar = document.getElementById("progressBar");
const progressPercentage = ((currentQuestionIndex + 1) / questions.length) * 100;
progressBar.style.width = `${progressPercentage}%`;
}

function endQuiz() {
clearInterval(timer);
document.getElementById("quizContainer").classList.add("hidden");
document.getElementById("resultSection").classList.remove("hidden");
document.getElementById("scoreDisplay").innerText = `You scored ${score} out of ${questions.length}`;

const reviewList = document.getElementById("answerReview");
reviewList.innerHTML = "";

questions.forEach((question, index) => {
const li = document.createElement("li");
li.innerHTML = `${question.title} - Correct Answer: ${question.options[question.correct]}`;
reviewList.appendChild(li);
});

setupSocialShare();
}

function setupSocialShare() {
const shareText = `I scored ${score} out of ${questions.length} on the Hacker Quiz! Try it out!`;

document.getElementById("shareFacebook").href = `https://www.facebook.com/sharer/sharer.php?u=https://example.com&quote=${encodeURIComponent(shareText)}`;
document.getElementById("shareTwitter").href = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=https://example.com`;
document.getElementById("shareWhatsApp").href = `https://wa.me/?text=${encodeURIComponent(shareText)}`;
document.getElementById("shareLinkedIn").href = `https://www.linkedin.com/shareArticle?mini=true&url=https://example.com&title=${encodeURIComponent("Hacker Quiz Results")}&summary=${encodeURIComponent(shareText)}`;
document.getElementById("shareInstagram").href = `https://www.instagram.com/`; // No direct Instagram share link
document.getElementById("shareGitHub").href = `https://github.com/`;

document.getElementById("socialShare").classList.remove("hidden");
}

function submitScore(event) {
event.preventDefault();
document.getElementById("submitScoreForm").classList.add("hidden");
document.getElementById("feedbackSection").classList.remove("hidden");
}




Loading

0 comments on commit c5fd704

Please sign in to comment.