└── Quiz App ├── style.css ├── index.html └── app.js /Quiz App/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .btnn:hover { 7 | background: rgb(2, 0, 36); 8 | background: linear-gradient( 9 | 90deg, 10 | rgba(2, 0, 36, 1) 0%, 11 | rgba(9, 9, 121, 1) 35%, 12 | rgba(0, 212, 255, 1) 100% 13 | ); 14 | cursor: pointer; 15 | } 16 | 17 | .btnn { 18 | border: 1px solid #e5e5e5; 19 | border-radius: 6px; 20 | padding: 6px; 21 | font-size: 14px; 22 | color: white; 23 | justify-content: center; 24 | } 25 | 26 | .result{ 27 | border: 1px solid rgba(0, 0,0, 0.2); 28 | flex-direction: column; 29 | } 30 | -------------------------------------------------------------------------------- /Quiz App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Quiz App 13 | 14 | 15 |
16 |

Quiz App

17 |
18 |
19 | 20 |
21 | 39 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Quiz App/app.js: -------------------------------------------------------------------------------- 1 | var displayQuestion = document.getElementById("displayQuestion"); 2 | var answerParent = document.getElementById("answerParent"); 3 | var currentQuestion = document.getElementById("currentQuestion"); 4 | var totalQuestions = document.getElementById("totalQuestions"); 5 | var result = document.getElementById("result"); 6 | var questionDisplay = document.getElementById("questionDisplay"); 7 | var marks = document.getElementById("marks"); 8 | var percentage = document.getElementById("percentage"); 9 | var comment = document.getElementById("comment"); 10 | var startQuiz = document.getElementById("startQuiz"); 11 | var indexValue = 0; 12 | var score = 0; 13 | var questions = [ 14 | { 15 | question:"My name is ______________ .", 16 | options: ["S.M. Hamza Bukhari","Ahmed Faraz Ali","Atif Ali","Bilal Ahmed"], 17 | correctAns: "S.M. Hamza Bukhari" 18 | }, 19 | { 20 | question:"HTML stands for ______________ .", 21 | options: ["HyperText Markup Language","HyperText Makeup Language","HyperText Markup Lang","HyperText Mark Language"], 22 | correctAns: "HyperText Markup Language" 23 | }, 24 | { 25 | question:"The smallest Ocean is ______________ .", 26 | options: ["Pacific Ocean","Arctic Ocean","Indian Ocean","Atlantic Ocean","the Southern Ocean"], 27 | correctAns: "Arctic" 28 | }, 29 | { 30 | question:"RAM stands for ______________ .", 31 | options: ["Random Access Memory","Read Access Memory","real Access Memory","Random Accept Memory"], 32 | correctAns: "Random Access Memory" 33 | }, 34 | { 35 | question:"SI unit of Force is ______________ .", 36 | options: ["Candela","Ampere","Newton","Newton Meter"], 37 | correctAns: "Newton" 38 | }, 39 | { 40 | question:"Smallest number among the numbers given below is ______________ .", 41 | options: ["34","33.02","33.3","34.1"], 42 | correctAns: "32.02" 43 | }, 44 | { 45 | question:"ROM stands for ______________ .", 46 | options: ["Read Only Memes","Random Only Memory","Read Only Memory","Read On Memory"], 47 | correctAns: "Read Only Memory" 48 | }, 49 | { 50 | question:"SQL stands for ______________ .", 51 | options: ["Structured Query Lang","Structured Query Language","Struct Query Language","Structured Queen Language"], 52 | correctAns: "Structured Query Language" 53 | }, 54 | { 55 | question:"DOM stands for ______________ .", 56 | options: ["Document Object Model","Doc Object Model","Document Object Mode","Document Obstacle Model"], 57 | correctAns: "Document Object Model" 58 | }, 59 | { 60 | question:"JS stands for ______________ .", 61 | options: ["Java Script","Java Science","Just Script","Java Screen"], 62 | correctAns: "Java Script" 63 | }, 64 | ] 65 | function starting(){ 66 | startQuiz.style.display = "none"; 67 | questionDisplay.style.display = "block"; 68 | } 69 | function renderQuestion(){ 70 | displayQuestion.innerHTML = questions[indexValue].question; 71 | for(var i=0; i` 73 | } 74 | totalQuestions.innerHTML = questions.length; 75 | currentQuestion.innerHTML = indexValue + 1; 76 | } 77 | renderQuestion(); 78 | function nextQuestion(optionValue,correctValue){ 79 | answerParent.innerHTML = ""; 80 | 81 | if(optionValue == correctValue){ 82 | score++; 83 | marks.innerHTML = score; 84 | } 85 | if(indexValue + 1 == questions.length){ 86 | var per = score/questions.length*100; 87 | percentage.innerHTML = per.toFixed(2); 88 | if(per >= 80){ 89 | comment.innerHTML = "Congratulations! You did Great"; 90 | comment.style.color = "lightgreen"; 91 | } 92 | else if(per >= 60 && per <80){ 93 | comment.innerHTML = "You Passed!"; 94 | comment.style.color = "Yellow"; 95 | }else{ 96 | comment.innerHTML = "You Failed!"; 97 | comment.style.color = "Red"; 98 | } 99 | result.style.display = "block"; 100 | questionDisplay.style.display = "none"; 101 | }else{ 102 | indexValue++; 103 | renderQuestion(); 104 | } 105 | } 106 | --------------------------------------------------------------------------------