Web Quiz App only HTML, CSS JS
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="author" content="BihariGraphic" >
<title>Web Dev Quiz</title>
<link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Google Sans" rel="stylesheet">
</head>
<body>
<section class="sec1" >
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTYbCNJQUfl4xzwdfgyVff-isMo2F6LzZUeJA&usqp" alt="" >
</div>
<div>
<h3>Web Development Quiz</h3>
<p>Are you a coding lover? Let's check your knowledge by taking this Quiz App. It's time to prove your programming skills.</p>
<button class="btn btn1 continue-btn" >Continue</button>
</div>
</section>
<section class="sec2" >
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQwmqylT3hlUqqVnku_VbEJzd_x4aur7IvOHg&usqp=CAU" alt="" >
</div>
<p>Welcome to the Web Development Quiz! Please select your answer and click submit </p>
<div>
<input type="text" class="input" placeholder="Enter Your Name" >
</div>
<button class="btn btn1 start-quiz" >Start Quiz</button>
</section>
<section class="sec3" >
<div class="box" >
<div class="box__header" >
<div class="index" >1/10</div>
<div class="toast" ></div>
<div class="time" >00:01</div>
</div>
<h3 class="question" ></h3>
<ul class="quiz" >
</ul>
<button class="submit">Continue</button>
</div>
</section>
<section class="sec4">
<div class="des" >
<h3 class="mb-1 name" >amardeep kesharwani</h3>
<p class="mb-1" >Congratulation you did a great job!🎉🎉 <br> you have unlocked a new certificate </p>
</div>
<button class="check-ans btn" >Check Your Answers</button>
<h3> Your Certificate</h3>
<div class="certificate" >
<h4>Web development Quiz</h4>
<p id="name">Amardeep Kesarwani</p>
<p id="score">Score: 50%</p>
<small id="id">Test Id : 737373</small>
<small id="date">7-5-2020</small>
<small class="sin" >Amardeep</small>
</div>
<h1 class="great" >Excellent</h1>
</section>
<section class="sec5" >
<div class="flex" >
<h2>Your Answers</h2>
<h2 class="sc" ></h2>
</div>
<p class="mb-1" >If your answer is wrong then we cannot show the correct answer. This is Our private policy</p>
<ul class="ans-list" >
</ul>
<button class="btn back-btn" >Back</button>
</section>
<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
CSS
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:Google Sans,sans-serif;
line-height:1.3;
font-size:16px;
background:#f5f5f5;
color:#333;
}
button {
display:inline-block;
outline:none;
border:none;
padding:10px 25px;
transition: 300ms ease-in;
}
img {
max-width:100%;
}
section {
min-height:100vh;
width:100%;
max-width:420px;
margin:0 auto;
padding:20px;
}
.sec2 ,.sec3 ,.sec4 ,.sec5 {
display:none;
}
.sec1, .sec2{
background:#fff;
text-align:center;
}
.sec1 p, .sec2 p{
font-size:19px;
color:#666;
margin-bottom:30px;
}
.input {
outline:none;
border:2px solid #f2d533;
width:100%;
padding:10px;
font-size:16px;
margin-bottom:25px;
}
.sec1 h3 {
margin-top:-25px;
margin-bottom:10px;
color:#f2d533;
font-size:24px;
}
.sec3 {
background:linear-gradient(252deg, rgba(69, 69, 69, 0.03) 0%, rgba(69, 69, 69, 0.03) 50%,rgba(47, 47, 47, 0.03) 50%, rgba(47, 47, 47, 0.03) 100%),linear-gradient(335deg, rgba(66, 66, 66, 0.09) 0%, rgba(66, 66, 66, 0.09) 50%,rgba(188, 188, 188, 0.09) 50%, rgba(188, 188, 188, 0.09) 100%),linear-gradient(223deg, rgba(194, 194, 194, 0.08) 0%, rgba(194, 194, 194, 0.08) 50%,rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 100%),linear-gradient(82deg, rgba(27, 27, 27, 0.01) 0%, rgba(27, 27, 27, 0.01) 50%,rgba(197, 197, 197, 0.01) 50%, rgba(197, 197, 197, 0.01) 100%),linear-gradient(281deg, rgba(3, 3, 3, 0.09) 0%, rgba(3, 3, 3, 0.09) 50%,rgba(198, 198, 198, 0.09) 50%, rgba(198, 198, 198, 0.09) 100%),linear-gradient(319deg, rgba(47, 47, 47, 0.01) 0%, rgba(47, 47, 47, 0.01) 50%,rgba(89, 89, 89, 0.01) 50%, rgba(89, 89, 89, 0.01) 100%),linear-gradient(278deg, rgba(243, 243, 243, 0.06) 0%, rgba(243, 243, 243, 0.06) 50%,rgba(63, 63, 63, 0.06) 50%, rgba(63, 63, 63, 0.06) 100%),linear-gradient(38deg, rgba(81, 81, 81, 0.09) 0%, rgba(81, 81, 81, 0.09) 50%,rgba(201, 201, 201, 0.09) 50%, rgba(201, 201, 201, 0.09) 100%),linear-gradient(33deg, rgba(168, 168, 168, 0.08) 0%, rgba(168, 168, 168, 0.08) 50%,rgba(129, 129, 129, 0.08) 50%, rgba(129, 129, 129, 0.08) 100%),linear-gradient(0deg, #1b9efe,#46f3e7);
}
.box {
width:100%;
background:#fcfcfc;
padding:20px;
border-radius:10px;
margin-top:50px;
text-align:center;
}
.box__header {
display:flex;
justify-content: space-between;
margin-bottom:50px;
font-size:14px;
color:#555;
font-weight:bold;
}
.box__header div {
padding:5px 0;
}
.question {
margin-bottom:30px;
}
ul{
list-style:none;
}
.quiz li {
padding:15px;
margin-bottom:12px;
border-radius:8px;
color:#666;
background:#fff;
box-shadow:0 0 2px rgba(0,0,0,0.2);
transition: 300ms ease-in;
}
.quiz li.select {
background:#68c9c6;
color:#fff;
animation:zoomOut 300ms ease;
}
@keyframes zoomOut{
0% ,100%{
transform:scale(1);
}
50% {
transform:scale(0.8);
}
}
.submit {
width:100%;
padding:15px;
margin-bottom:12px;
border-radius:8px;
color:#fff;
background:#f05577;
text-transform:uppercase;
margin-bottom:20px;
}
.certificate {
position:relative;
width:100%;
height:220px;
width:320px;
background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSvXc9FwiY9FLZBAkVVbblE0m6gLlFYhXAgKg&usqp=CAU");
background-size:cover;
background-position:center center;
margin:20px 0;
padding:20px;
text-align:center;
color:#555;
}
.certificate h4 {
margin-top:36px;
color:#000;
margin-bottom:8px;
}
#date {
position:absolute;
left:40px;
bottom:25px;
font-size:12px;
}
.sin {
position:absolute;
right:40px;
bottom:25px;
font-family:cursive;
text-decoration:underline;
}
.btn {
padding:10px 20px;
margin-bottom:12px;
border-radius:2px;
color:#fff;
background:#f05577;
text-transform:uppercase;
margin-bottom:20px;
}
button:hover {
opacity:0.9;
animation:zoomOut 300ms ease;
}
.red {
color:#f00;
}
.green {
color:#00ff04;
}
.ans-list {
margin:20px 0;
}
.ans-list li{
padding:15px;
margin-bottom:15px;
border-radius:2px;
color:#666;
background:#fff;
box-shadow:0 0 2px rgba(0,0,0,0.2);
line-height:1.4;
}
.flex {
display:flex;
justify-content: space-between;
font-size:16px;
margin-bottom:15px;
}
.box__header .toast {
display:inline-block;
background:#f05577;
padding:5px 15px;
border-radius:20px;
color:#fff;
opacity:0.7;
display:none;
}
.btn1 {
background:#f2d533;
color:#000;
font-weight:bold;
border-radius:20px;
padding:12px 25px;
}
.des {
margin:15px 0;
text-align:left;
}
.mb-1 {
margin-bottom:1rem;
}
h3.mb-1 {
color:#f05577;
text-transform:capitalize;
border-bottom:1px solid #999;
padding-bottom:5px;
display:inline-block;
font-size:20px;
}
.great {
text-align:center;
font-size:4rem;
color:#f05577;
opacity:0.7;
}
JavaScript
<script>
//Do not see the answer
const ques=[{que:"which of these Elements are all <table> Elements",option:["<table><tr><td>","<table><tr><tt>","<table><foot><head>","<table><tb><tt>"],crt:0},{que:"How do you define a custom property in css?",option:["$custom-property = 10","$custom-property : 10","--custom-property : 10","--custom-property = 10"],crt:2},{que:"in CSS, what is the order of the box model from the inside out",option:["Content, Margin, Border, Padding","Padding, Margin, Border, Content","Content, Padding, Border, Margin","Border, Padding, Margin, Content"],crt:2},{que:"How do you check grid support in css",option:["@supports(grid)","@supports(display:grid)","@feature(display:grid)","@feature(grid)"],crt:1},{que:"Which of the following is not a valid CSS property",option:["text-wrap","will-change","empty-cells","border-image"],crt:0},{que:"How do you define multiple transition in css?",option:["transition: width 1s, height 2s","transition: width height, 1s 2s","transition: width 1s/ height 2s","transition: width, 1s, height, 2s"],crt:0},{que:"What is the result of 100/0 in JavaScript",option:["it throws an error","0","infinity","NaN"],crt:2},{que:"in Node.js, how do you import a module using CommonJs.",option:["const a = require('f')","const a = import('f')","const a from ('f')","const a = include('f')"],crt:0},{que:"which of the following false",option:["' ' == false","false === false","null == undefined","NaN == NaN"],crt:3},{que:"ReactJS uses _____ to increase performance",option:["Original DOM","Virtual DOM","Shadow DOM","Web DOM"],crt:1},{que:"Key in React Js, must be unique in which scope?",option:["Globally","inside Component","in the loop they are used in","in the component they are rendering in"],crt:2},{que:"What year was React Js open-sourced?",option:["2015","2014","2013","2012"],crt:2},{que:"Which built-in method returns the index within the calling String object of the first occurrence of the specified value?",option:["indexOf()","getIndex()","location()","slice()"],crt:0},{que:"Which of the following function of String object is used to match a regular expression against a string?",option:["search","replace()","concat()","match()"],crt:3},{que:"Which of the following function is used to locate a string within a string?",option:["strpos()","search()","locate()","strlen()"],crt:0},{que:"What does PHP stand for?",option:["Preprocessed Hypertext Page","Hypertext Markup Language","PHP: Hypertext Preprocessor","Hypertext Transfer Protocol"],crt:2},{que:"Which of the following is NOT a valid PHP comparison operator",option:["!=",">=","<>","<=>"],crt:3},{que:"Which of the following is NOT a magic predefined constant?",option:["__LINE__","__FILE__","__DATE__","__CLASS__"],crt:2},{que:"In which variable is the users IP address stored?",option:["$DOMAIN","$REMOTE_ADDR","$_ENV","$GLOBALS"],crt:1},{que:"When was the sololearn app launched?",option:["2011","2012","2013","2014"],crt:3}];
let score = 0, index = 0, name = "",answer = [], times;
$(document).ready(function(){
$(".continue-btn").click(function(){
$(".sec1").fadeOut();
$(".sec2").fadeIn();
});
$(".start-quiz").click(function(){
name = $(".input").val();
if(name === '') {
alert("Please Enter Your Name")
return;
}
$(".sec2").fadeOut();
$(".sec3").fadeIn();
newQuestion()
startTimes()
});
$(".quiz").on("click","li", function(){
$(".quiz .select").removeClass("select");
$(this).addClass("select");
})
$(".submit").click(function(){
const select = $(".quiz li").hasClass("select");
if(!select) {
alert("please select any option");
return;
}
const key = $(".quiz .select").attr("data-key");
checkAns(key)
})
$(".check-ans").click(function(){
$(".sec4").fadeOut();
$(".sec5").fadeIn();
showYourAns()
});
$(".back-btn").click(function(){
$(".sec5").fadeOut();
$(".sec4").fadeIn();
});
});
let s = 0, m = "0"+0;
function showTime(){
s++
if(s >= 60) {
s = 0;
m++
m = m < 10 ? "0" + m : m;
}
s = s < 10 ? "0" + s : s;
$(".time").text(m+":"+s);
}
function startTimes(){
times = setInterval(showTime,1000)
}
function newQuestion(){
const que = ques[index];
showIndex()
$(".question").text(que.que);
$(".quiz").html("");
que.option.forEach((q,i) => {
const li = document.createElement('li');
li.setAttribute('data-key',i);
li.textContent = q;
$(".quiz").append(li)
})
}
function checkAns(key) {
const que = ques[index];
answer.push(key);
if(que.crt == key) {
score++;
makeToast("Right")
} else{
makeToast("Wrong")
}
index++;
if(index < ques.length) {
newQuestion()
} else{
showResult()
clearInterval(times)
}
}
function showIndex(){
$(".index").text(1 + index+"/"+ques.length)
}
function showResult(){
$(".sec3").fadeOut();
$(".sec4").fadeIn();
$("#name").text(name);
$(".name").text(name);
const scores = Math.round(score / ques.length * 100);
const grt = scores < 25 ? "Nice" : scores < 50 ? "Good" : scores < 76 ? "Very Good" : "Excellent";
$("#score").text("Score : "+ scores +"%");
$("#id").text("Test Id : "+ Math.ceil(Math.random() * 20000));
let date = new Date();
let today = String(date.getDate()).padStart(2, '0') + '/' + String(date.getMonth() + 1).padStart(2, '0') + '/' + date.getFullYear();
$("#date").text(today);
$(".great").text(grt);
}
function showYourAns() {
$(".ans-list").html("");
$(".sc").text(score+ "/"+ques.length)
ques.forEach((que,i) => {
const li = document.createElement('li');
const p = document.createElement('p');
const span = document.createElement('span');
p.textContent = 1+i +" : "+ que.que;
const chrt = que.crt == answer[i] ? '👉' : '❌';
span.textContent = chrt +" "+ que.option[answer[i]];
const cls = que.crt == answer[i] ? 'green' : 'red';
span.classList.add(cls);
li.appendChild(p)
li.appendChild(span)
$(".ans-list").append(li);
})
}
function makeToast(txt) {
$(".toast").text(txt);
$(".toast").fadeIn();
setTimeout(() => $(".toast").fadeOut(),1000)
}
</script>
