Skip to content

Commit d6fdb52

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #934 from Divyanshu9822/#928_DynamicQuizJs_Divyanshu9822
#928 - Added question navigation panel and updated README in "Dynamic Quiz Js"
2 parents 93767b9 + 7217882 commit d6fdb52

4 files changed

Lines changed: 211 additions & 89 deletions

File tree

‎Projects/Dynamic js Quiz/README.md‎

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,53 @@
1-
text.js is a zero-dependency JavaScript quiz plugin which lets you creates interactive, fully customizable online quizzes and tests with ease.
1+
# Dynamic Quiz JS
22

3-
clone this repo in your computer by using:
4-
git clone <link>
3+
Dynamic Quiz Js is a basic quiz application built using HTML, CSS, and JavaScript. It provides a user-friendly and visually appealing Google-like interface. The application is fully responsive, ensuring a seamless experience across different devices.
54

6-
click on go live button and enjoy your quiz game.
7-
![jsquiz](https://user-images.githubusercontent.com/95610027/214227368-5a49d70c-c101-4eb8-aee5-7dad0a60dcee.png)
5+
## Features
6+
7+
1. **Start Quiz**: Clicking on the "Start Quiz" button initiates the quiz and displays the first question.
8+
9+
2. Next Button: The "Next" button allows the user to move to the next question.
10+
11+
3. **Previous Button**: The "Previous" button enables the user to navigate to the previous question.
12+
Start Over: The "Start Over" button resets the quiz and allows the user to attempt it again.
13+
14+
4. **Question Navigation**: The question navigation panel displays the numbers of all questions. Clicking on a question number redirects the user to that specific question, allowing for easy navigation and review.
15+
16+
## Screenshots
17+
18+
![](https://github.com/TusharKesarwani/Front-End-Projects/assets/90151736/71261845-f60e-442e-b4a4-876d71684073)
19+
20+
![](https://github.com/TusharKesarwani/Front-End-Projects/assets/90151736/3751321b-27e2-4856-9ae4-5ff35a567c26)
21+
22+
![](https://github.com/TusharKesarwani/Front-End-Projects/assets/90151736/ce07a727-98b0-4c49-8fa2-72aec055f81d)
23+
24+
25+
## Getting Started
26+
27+
To run the **Dynamic Quiz Js** application locally, follow these steps:
28+
29+
1. **Clone the repository**:
30+
31+
```bash
32+
git clone https://github.com/TusharKesarwani/Front-End-Projects.git
33+
```
34+
35+
2. **Navigate to the project directory**:
36+
37+
```bash
38+
cd Projects
39+
cd Dynamic js Quiz
40+
```
41+
3. Open the **index.html** file in your preferred web browser or in VS Code click on **Go Live** to open with live server.
42+
43+
## Contributing
44+
45+
Contributions to the Dynamic Quiz Js project are welcome and encouraged! If you encounter any issues or have suggestions for improvement, please raise an issue.
46+
47+
If you would like to contribute code to the project, please follow these steps:
48+
49+
1. Fork the repository.
50+
2. Create a new branch for your feature or bug fix.
51+
3. Make your changes and commit them.
52+
4. Push your changes to your forked repository.
53+
5. Submit a pull request to the main repository.

‎Projects/Dynamic js Quiz/index.html‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Dynamic Quiz Project</title>
5-
<link type='text/css' rel='stylesheet' href='style.css'/>
6-
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
7-
</head>
8-
<body>
9-
<main>
10-
<div id="project-name">Dynamic Quiz Js</div>
11-
<div id='container'>
12-
<div id='quiz'></div>
3+
<head>
4+
<title>Dynamic Quiz Project</title>
5+
<link type='text/css' rel='stylesheet' href='style.css'/>
6+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open Sans"/>
7+
</head>
8+
<body>
9+
<main>
10+
<div id="project-name">Dynamic Quiz Js</div>
11+
<div id='container'>
12+
<div id='quiz'></div>
13+
<div id="navigation-panel">
14+
<!-- Navigation buttons dynamically generated using JavaScript -->
15+
</div>
16+
<div class="controls">
17+
<div class='button' id='prev'>Prev</div>
18+
<div class='button' id='next'>Next</div>
19+
<div class='button' id='start'>Start Over</div>
20+
</div>
21+
</div>
22+
</main>
1323

14-
<div class="controls">
15-
<div class='button' id='prev'>Prev</div>
16-
<div class='button' id='next'>Next</div>
17-
<div class='button' id='start'>Start Over</div>
18-
</div>
19-
</div>
20-
21-
</main>
22-
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
23-
<script type="text/javascript" src='questions.json'></script>
24-
<script type='text/javascript' src='text.js'></script>
25-
</body>
24+
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
25+
<script type="text/javascript" src='questions.json'></script>
26+
<script type='text/javascript' src='text.js'></script>
27+
</body>
2628
</html>

‎Projects/Dynamic js Quiz/style.css‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ main{
3232
display:none;
3333
}
3434
.controls{
35-
margin-top: 30px;
35+
margin-top: 20px;
3636
display: flex;
3737
justify-content: space-between;
3838
}
@@ -49,6 +49,34 @@ main{
4949
background-color: #cac6c6;
5050
}
5151

52+
/* Existing CSS styles... */
53+
54+
#navigation-panel {
55+
margin-top: 20px;
56+
/* border: 2px solid red; */
57+
width: 100%;
58+
text-align: center;
59+
}
60+
61+
.navigation-button {
62+
display: inline-block;
63+
padding: 8px 13px;
64+
/* width: 30px; */
65+
/* height: 30px; */
66+
margin: 0 5px;
67+
background-color: rgb(214, 211, 211);
68+
border: 2px solid black;
69+
border-radius: 8px;
70+
text-align: center;
71+
cursor: pointer;
72+
}
73+
74+
.navigation-button.active {
75+
background-color: rgb(57, 207, 57);
76+
color: white;
77+
}
78+
79+
/* Existing CSS styles... */
5280

5381

5482
#container {
@@ -91,7 +119,7 @@ ul {
91119
input[type="radio"] {
92120
display: none;
93121
}
94-
122+
95123
label {
96124
border: 2px solid black;
97125
padding: 12px 8px;
@@ -108,7 +136,7 @@ input[type="radio"]:checked + label {
108136
.right {
109137
float: right;
110138
}
111-
139+
112140

113141
@media screen and (max-width: 750px) {
114142
#container{

‎Projects/Dynamic js Quiz/text.js‎

Lines changed: 105 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -30,28 +30,28 @@
3030
var questionCounter = 0; // Tracks question number
3131
var selections = []; // Array containing user choices
3232
var quiz = $("#quiz"); // Quiz div object
33+
var navigationPanel = $("#navigation-panel"); // Navigation panel div object
3334

3435
// Display initial question
3536
displayNext();
3637

38+
// Generate navigation buttons
39+
generateNavigationButtons();
40+
3741
// Click handler for the 'next' button
38-
$("#next").on("click", function (e) {
39-
e.preventDefault();
42+
$('#next').on('click', function (e) {
43+
e.preventDefault();
4044

41-
// Suspend click listener during fade animation
42-
if (quiz.is(":animated")) {
43-
return false;
44-
}
45-
choose();
45+
// Suspend click listener during fade animation
46+
if (quiz.is(':animated')) {
47+
return false;
48+
}
49+
choose();
4650

47-
// If no user selection, progress is stopped
48-
if (isNaN(selections[questionCounter])) {
49-
alert("Please make a selection!");
50-
} else {
51-
questionCounter++;
52-
displayNext();
53-
}
54-
});
51+
questionCounter++;
52+
displayNext();
53+
updateNavigationPanel();
54+
});
5555

5656
// Click handler for the 'prev' button
5757
$("#prev").on("click", function (e) {
@@ -63,6 +63,7 @@
6363
choose();
6464
questionCounter--;
6565
displayNext();
66+
updateNavigationPanel();
6667
});
6768

6869
// Click handler for the 'Start Over' button
@@ -75,7 +76,22 @@
7576
questionCounter = 0;
7677
selections = [];
7778
displayNext();
79+
updateNavigationPanel();
7880
$("#start").hide();
81+
navigationPanel.show(); // Show the navigation panel when starting over
82+
});
83+
84+
// Click handler for the navigation buttons
85+
navigationPanel.on("click", ".navigation-button", function(e) {
86+
e.preventDefault();
87+
88+
if (quiz.is(":animated")) {
89+
return false;
90+
}
91+
92+
questionCounter = parseInt($(this).attr("data-question"));
93+
displayNext();
94+
updateNavigationPanel();
7995
});
8096

8197
// Animates buttons on hover
@@ -144,67 +160,97 @@
144160
var selectedOption = $('input[name="answer"]:checked').val();
145161
if (selectedOption !== undefined) {
146162
selections[questionCounter] = parseInt(selectedOption);
147-
}
163+
} else {
164+
selections[questionCounter] = -1; // indicate unselected option
148165
}
166+
}
149167

150168
// Displays next requested element
151-
function displayNext() {
152-
quiz.fadeOut(function () {
153-
$("#question-box").remove();
154-
155-
if (questionCounter < questions.length) {
156-
var nextQuestion = createQuestionElement(questionCounter);
157-
quiz.append(nextQuestion).fadeIn();
158-
if (!(isNaN(selections[questionCounter]))) {
159-
$('input[value="' + selections[questionCounter] + '"]').prop(
160-
"checked",
161-
true
162-
);
163-
}
164-
165-
// Controls display of 'prev' button
166-
if (questionCounter === 1) {
167-
$("#prev").show();
168-
} else if (questionCounter === 0) {
169-
$("#prev").hide();
170-
$("#next").show();
171-
}
172-
} else {
173-
var scoreElem = displayScore();
174-
quiz.append(scoreElem).fadeIn();
175-
$("#next").hide();
169+
// Displays next requested element
170+
function displayNext() {
171+
quiz.fadeOut(function () {
172+
$("#question-box").remove();
173+
174+
if (questionCounter < questions.length) {
175+
var nextQuestion = createQuestionElement(questionCounter);
176+
quiz.append(nextQuestion).fadeIn();
177+
if (!(isNaN(selections[questionCounter]))) {
178+
$('input[value="' + selections[questionCounter] + '"]').prop(
179+
"checked",
180+
true
181+
);
182+
}
183+
184+
// Controls display of 'prev' button
185+
if (questionCounter === 1) {
186+
$("#prev").show();
187+
} else if (questionCounter === 0) {
176188
$("#prev").hide();
177-
$("#start").show();
178-
// Clear selections when displaying final results
179-
selections = [];
180-
questionCounter = 0; // Reset question counter
189+
$("#next").show();
190+
}
191+
} else {
192+
var scoreElem = displayScore();
193+
quiz.append(scoreElem).fadeIn();
194+
$("#next").hide();
195+
$("#prev").hide();
196+
$("#start").show();
197+
navigationPanel.hide(); // Hide the navigation panel on result screen
198+
// Clear selections when displaying final results
199+
selections = [];
200+
questionCounter = 0; // Reset question counter
181201

182-
// Clear previous result
202+
// Clear previous result
183203
$("#result").remove();
184-
}
185-
});
186-
}
204+
}
205+
});
206+
}
207+
187208

188209
// Computes score and returns a paragraph element to be displayed
189210
function displayScore() {
190-
var score = $("<p>", {
191-
id: "question-box",
211+
var score = $('<p>', {
212+
id: 'question-box'
192213
});
193214

194215
var numCorrect = 0;
216+
var numUnselected = 0;
195217
for (var i = 0; i < selections.length; i++) {
196218
if (selections[i] === questions[i].correctAnswer) {
197219
numCorrect++;
198220
}
221+
if (selections[i] === -1) {
222+
numUnselected++;
223+
}
199224
}
200225

201-
score.append(
202-
"You got " +
203-
numCorrect +
204-
" questions out of " +
205-
questions.length +
206-
" right!!!"
207-
);
226+
score.append('You got ' + numCorrect + ' questions out of ' +
227+
questions.length + ' right!');
228+
229+
if (numUnselected > 0) {
230+
score.append('<br>' + numUnselected + ' question(s) were left unanswered.');
231+
}
232+
// Hide the navigation panel on the result screen
233+
navigationPanel.hide();
234+
208235
return score;
236+
}
237+
// Generates navigation buttons based on the number of questions
238+
function generateNavigationButtons() {
239+
for (var i = 0; i < questions.length; i++) {
240+
var button = $(
241+
'<div class="navigation-button" data-question="' +
242+
i +
243+
'">' +
244+
(i + 1) +
245+
"</div>"
246+
);
247+
navigationPanel.append(button);
209248
}
210-
})();
249+
}
250+
251+
// Updates the active state of the navigation buttons
252+
function updateNavigationPanel() {
253+
navigationPanel.find(".navigation-button").removeClass("active");
254+
navigationPanel.find('.navigation-button[data-question="' + questionCounter + '"]').addClass("active");
255+
}
256+
})();

0 commit comments

Comments
 (0)