Skip to content

Commit

Permalink
Added a new quiz utility
Browse files Browse the repository at this point in the history
  • Loading branch information
@dellucifer
dellucifer committed Oct 13, 2023
1 parent fff7904 commit 6a7f130
Show file tree
Hide file tree
Showing 2 changed files with 316 additions and 0 deletions.
153 changes: 153 additions & 0 deletions QuizApp/dellucifer/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>

<head>
<title>Quiz Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="quiz_wrapper">
<div class="question" id="questionBox">

</div>

<div class="options">
<ul id="ul">
<li id="opt1" onclick="button(this)"></li>
<li id="opt2" onclick="button(this)"></li>
<li id="opt3" onclick="button(this)"></li>
<li id="opt4" onclick="button(this)"></li>
</ul>
</div>
<div class="score">
<div class="next">
<button type="button" onclick="moveNext()" id="nextButton">Next</button>
</div>
<div class="score-card">
Points : <span id="scoreCard">0</span>
</div>
<div class="back">
<button type="button" onclick="moveBack()" id="backButton">Back</button>
</div>
<div class="restart">
<button type="button" onclick="reloadPage()" id="restartButton">Restart</button>
</div>
</div>


</div>
<script type="text/javascript">
function reloadPage() {
location.reload();
}
</script>


<script type="text/javascript">

var ul = document.getElementById('ul');
var nextBtn = document.getElementById('nextButton');
var scoreCard = document.getElementById('scoreCard');
var quizBox = document.getElementById('questionBox');
var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
var opt4 = document.getElementById('opt4');


var app = {
questions: [
{ q: 'What does CPU stand for?', options: ['Central Processing Unit', 'Computer Personal Unit', 'Central Personal Unit', 'None of these'], answer: 1 },
{ q: 'What does RAM stand for?', options: ['Read After Modification', 'Random Access Memory', 'Random After Modification', 'Read Access Memory'], answer: 2 },

{ q: 'Which company developed JavaScript?', options: ['Oracle', 'Netscape', 'Microsoft', 'Google'], answer: 2 },

{ q: 'What is the default value of the opacity property in CSS?', options: ['0.5', '1', '0', '0.1'], answer: 3 },

{ q: 'How do you call a function named "myFunction" in JavaScript?', options: ['call myFunction()', 'call function myFunction()', 'myFunction()', 'function myFunction()'], answer: 3 },

],
index: 0,
load: function () {
if (this.index <= this.questions.length - 1) {
quizBox.innerHTML = this.index + 1 + ". " + this.questions[this.index].q;
opt1.innerHTML = this.questions[this.index].options[0];
opt2.innerHTML = this.questions[this.index].options[1];
opt3.innerHTML = this.questions[this.index].options[2];
opt4.innerHTML = this.questions[this.index].options[3];
this.scoreCard();
}
else {

quizBox.innerHTML = "Quiz Finished......!!!"
opt1.style.display = "none";
opt2.style.display = "none";
opt3.style.display = "none";
opt4.style.display = "none";
nextBtn.style.display = "none";
}
},
moveNext: function () {
this.index++;
this.load();
},

moveBack: function () {
this.index--;
this.load();
},
checkAnswer: function (ele) {

var id = ele.id.split('');

if (id[id.length - 1] == this.questions[this.index].answer) {
this.score++;
ele.className = "correct";
ele.innerHTML = "Correct";
this.scoreCard();
}
else {
ele.className = "wrong";
ele.innerHTML = "Wrong";
}
},
notClickable: function () {
for (let i = 0; i < ul.children.length; i++) {
ul.children[i].style.pointerEvents = "none";
}
},

clickable: function () {
for (let i = 0; i < ul.children.length; i++) {
ul.children[i].style.pointerEvents = "auto";
ul.children[i].className = ''

}
},
score: 0,
scoreCard: function () {
scoreCard.innerHTML = this.questions.length + "/" + this.score;
}

}

window.onload = app.load();

function button(ele) {
app.checkAnswer(ele);
app.notClickable();
}

function moveNext() {
app.moveNext();
app.clickable();
}

function moveBack() {
app.moveBack();
app.clickable();
}
</script>
</body>

</html>
163 changes: 163 additions & 0 deletions QuizApp/dellucifer/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
body{
background-color: #000;
margin:0;
padding:0;
}

*{
box-sizing: border-box;
font-family: sans-serif;
}

.quiz_wrapper{
height: 450px;
width: 650px;
background-color: white;
margin:50px auto;
border-radius: 8px;
padding: 30px;
border:6px solid lime;
margin-top: 150px;
}

.quiz_wrapper .question{
padding: 15px;
background-color:#673ab7;
border-radius: 8px;
color:#ffffff;
font-size:20px;
float: left;
width: 100%;
}

.quiz_wrapper .options{
float: left;
width: 100%;
}

.quiz_wrapper .options ul{
list-style: none;
padding: 0px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.quiz_wrapper .options ul li{
display: inline-block;
background-color:#9e9e9e;
width: 47%;
padding: 15px;
border-radius:8px;
margin-top: 25px;
font-size: 15px;
color:#ffffff;
box-shadow: 0px 3px 0px grey;
cursor: pointer;
outline: none;
text-align: center;
}

.quiz_wrapper .options ul li:active{
box-shadow: 0px 3px 0px transparent;
}

.quiz_wrapper .options ul li.correct{
background-color: #0fd40f;
box-shadow: 0px 3px 0px #03a503;
}

.quiz_wrapper .options ul li.wrong{
background-color: #e91e1e;
box-shadow: 0px 3px 0px #cb0b0b;
}

.quiz_wrapper .score{
float: left;
width: 100%;
padding:25px 0px;
}

.quiz_wrapper .score .next{
width: 35%;
float: right;
}

.quiz_wrapper .score .next button{
padding: 15px 80px;
color:white;
background-color:#ff9800;
border:none;
border-radius:8px;
font-size: 15px;
cursor: pointer;
box-shadow: 0px 3px 0px #c97a06;
outline: none;
}

.quiz_wrapper .score .next button:active{
box-shadow: 0px 3px 0px transparent;
}

.quiz_wrapper .score .back{
width: 35%;
float: center;
}

.quiz_wrapper .score .back button{
padding: 15px 80px;
color:white;
background-color:#ff9800;
border:none;
border-radius:8px;
font-size: 15px;
cursor: pointer;
box-shadow: 0px 3px 0px #c97a06;
outline: none;
}

.quiz_wrapper .score .back button:active{
box-shadow: 0px 3px 0px transparent;
}

.quiz_wrapper .score .restart{
width: 1%;
float: right;
margin-top: 30px;
}

.quiz_wrapper .score .restart button{
padding: 15px 64px;
color:white;
background-color:red;
border:none;
border-radius:8px;
font-size: 15px;
cursor: pointer;
box-shadow: 0px 3px 0px #c97a06;
outline: none;

}

.quiz_wrapper .score .restart button:active{
box-shadow: 0px 3px 0px transparent;
}

.quiz_wrapper .score .score-card{
width: 30%;
float: right;
}

.quiz_wrapper .score .score-card{
font-size: 20px;
color:black;
line-height: 50px;
text-transform: uppercase;
}

.quiz_wrapper .score .score-card span{
background-color: #4caf50;
padding: 5px 15px;
border-radius: 8px;
color:#ffffff;
}

0 comments on commit 6a7f130

Please sign in to comment.