-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (144 loc) · 7.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Quiz</title>
<link rel="icon" href="media/fevicon1.webp" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>
</head>
<body>
<div id="particles-js"></div>
<div class="container">
<nav class="nav-links">
<a href="#" onclick="navigateTo('home')">Home</a>
</nav>
<div class="top-right-controls">
<button id="darkModeToggle" class="icon-button">
<i class="fas fa-moon"></i>
</button>
<button id="muteToggle" class="icon-button">
<i class="fas fa-volume-up"></i>
</button>
</div>
<div id="customAlert" role="alert" style="position: fixed; top: 10px; left: 50%; transform: translateX(-50%);"></div>
<div id="welcomeContainer" class="quiz-container" style="margin: 0 auto; max-width: 800px; width: 90%; padding: 20px;">
<h1>𝐶𝒉𝑜𝑜𝑠𝑒 𝑌𝑜𝑢𝑟 𝑸𝑢𝑖𝑧 𝐻𝑒𝑟𝑜 𝑡𝑜 𝐵𝑒𝑔𝑖𝑛 𝑡𝒉𝑒 𝐽𝑜𝑢𝑟𝑛𝑒𝑦!</h1>
<div class="avatar-selection">
<img src="media/male_neutral.png" id="male-avatar" class="avatar"
data-neutral="media/male_neutral.png"
data-chosen="media/male_chosen.png"
data-not-chosen="media/male_not_chosen.png" alt="Male Avatar">
<img src="media/female_neutral.png" id="female-avatar" class="avatar"
data-neutral="media/female_neutral.png"
data-chosen="media/female_chosen.png"
data-not-chosen="media/female_not_chosen.png" alt="Female Avatar">
</div>
<input type="text" id="playerName" placeholder="Enter your name" required style="width: 80%; padding: 12px; margin: 20px auto; border: 2px solid var(--card-bg); border-radius: 8px; background-color: var(--background-color); color: var(--text-color);">
<button onclick="showCategories()">Start Quiz</button>
</div>
<div id="categoryContainer" class="quiz-container hidden">
<h2>Choose a Category</h2>
<div class="category-section">
<h3 id="entertainment" class="category-header">Entertainment</h3>
<div id="entertainmentGrid" class="category-grid"></div>
</div>
<div class="category-section">
<h3 id="academics" class="category-header">Academics</h3>
<div id="academicsGrid" class="category-grid"></div>
</div>
</div>
<div id="quiz" class="quiz-container hidden">
<div id="questionContainer"></div>
<div id="questionProgress" aria-live="polite">
Question <span id="currentQuestionNumber"></span> of <span id="totalQuestions"></span>
</div>
<div id="feedbackMessage" class="feedback-message" aria-live="assertive"></div>
</div>
<div id="scoreContainer" class="quiz-container hidden">
<h2>Quiz Completed!</h2>
<img src="media/wave.gif" alt="Completion" class="completion-gif">
<div id="finalScore"></div>
<div id="levelInfo"></div>
<div class="button-group">
<button onclick="reviewAnswers()">Review Answers</button>
<button onclick="showLeaderboard()">View Leaderboard</button>
<button onclick="playAgain()">Play Again</button>
</div>
</div>
<div id="leaderboardContainer" class="quiz-container hidden">
<h2>Leaderboard</h2>
<div id="leaderboardList"></div>
<div class="button-group">
<button onclick="playAgain()">Play Again</button>
<button onclick="clearLeaderboard()">Clear Leaderboard</button>
</div>
</div>
<div id="reviewContainer" class="quiz-container hidden">
<h2>Review Your Answers</h2>
<div id="reviewList"></div>
<button onclick="showLeaderboard()">View Leaderboard</button>
<button onclick="playAgain()">Play Again</button>
</div>
<button id="reviewAnswersButton" class="hidden" onclick="reviewAnswers()">Review Answers</button>
<button id="leaderboardButton" class="hidden" onclick="showLeaderboard()">View Leaderboard</button>
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3>Follow me on social media</h3>
<div class="social-icons">
<a href="https://www.instagram.com/mystic__ak/" target="_blank">
<i class="fab fa-instagram"></i>
</a>
<a href="https://github.com/mysticai11" target="_blank">
<i class="fab fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/your_linkedin_username/" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div class="footer-section">
<h3>About this project</h3>
<p>This is a quiz project built using HTML, CSS, and JavaScript.</p>
</div>
<div class="footer-section">
<h3>Contact me</h3>
<p>If you have any questions or feedback, feel free to reach out to me at <a href="mailto:[email protected]">[email protected]</a>.</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Mystic_ai. All rights reserved.</p>
</div>
</footer>
<script>
function showLeaderboard() {
document.getElementById('scoreContainer').classList.add('hidden');
document.getElementById('leaderboardContainer').classList.remove('hidden');
displayLeaderboard();
}
function displayLeaderboard() {
const leaderboard = JSON.parse(localStorage.getItem('leaderboard')) || [];
const leaderboardList = document.getElementById('leaderboardList');
leaderboardList.innerHTML = leaderboard.map((entry, index) => `
<div class="leaderboard-entry">
<span>${index + 1}. ${entry.name}
<img src="${entry.avatar}" alt="Avatar" class="leaderboard-avatar">
</span>
<span>${entry.score}/${entry.total} (${entry.percentage}%) - Level ${entry.level}</span>
</div>
`).join('');
}
function clearLeaderboard() {
if (confirm('Are you sure you want to clear the leaderboard?')) {
localStorage.removeItem('leaderboard');
displayLeaderboard();
}
}
</script>
<script src="script.js"></script>
</body>
</html>