Add files via upload

vaisaliOH · Sep 14, 2024 · be91d9e · be91d9e
1 parent 3faa64c
commit be91d9e
Show file tree

Hide file tree

Showing 4 changed files with 256 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>QUIZ APP</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app">
+        <h1>QUIZ</h1>
+        <div class="question">
+            <h2 id="ques">HERE IS YOUR QUESTION</h2>
+            <div id="answers">
+                <button class="btn1">ANSWER 1</button>
+                <button class="btn1">ANSWER 2</button>
+                <button class="btn1">ANSWER 3</button>
+                <button class="btn1">ANSWER 4</button>
+            </div>
+            <button id="next">NEXT</button>
+        </div>
+    </div>
+</div>
+<script src="script.js"></script>   
+</body>
+</html>
+
diff --git a/launch.json b/launch.json
@@ -0,0 +1,7 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": []
+}
diff --git a/script.js b/script.js
@@ -0,0 +1,136 @@
+const questions=[
+    {
+        question: "What is the capital of France?",
+        answers:[
+            {text: "Paris", correct: true},
+            {text: "London", correct: false},
+            {text: "Germany",correct:false},
+            {text: "Rome", correct: false}       
+        ]
+    },
+        {
+            question:"What is the largest animal in the world?",
+            answers:[
+                {text:"Panda",correct:false},
+                {text:"Blue whale",correct:true},
+                {text:"Elephant",correct:false},
+                {text:"Koala",correct:false},
+            ]
+    },
+        {
+            question:"Electric bulb filament is made up of?",
+            answers:[
+                {text:"Carbon",correct:false},
+                {text:"Tungsten",correct:true},
+                {text:"Lead",correct:false},
+                {text:"Copper",correct:false},
+            ]
+    },
+        {
+            question:"Which of the following is usedin pencil?",
+            answers:[
+                {text:"Graphite",correct:true},
+                {text:"Aluminium",correct:false},
+                {text:"Charcoal",correct:false},
+                {text:"Phosphorus",correct:false},
+
+            ]
+    },
+        {
+            question:"What is the largest planet in our solar system?",
+            answers:[
+                {text:"Saturn",correct:false},
+                {text:"Jupiter",correct:true},
+                {text:"Mars",correct:false},
+                {text:"Earth",correct:false},
+            ]
+    }
+];
+
+const questionelem=document.getElementById("ques");
+const answerB=document.getElementById("answers");
+const nextbutton=document.getElementById("next");
+let questionindex=0;
+let score=0;
+
+
+function startquiz(){
+    questionindex=0;
+    score=0;
+    nextbutton.innerHTML="Next";
+    displayQuestion();
+}
+function displayQuestion(){
+    resetQuestion();
+    let current =questions[questionindex]
+    let qno=questionindex+1;
+    questionelem.innerHTML=qno+"."+current.question;
+
+current.answers.forEach(answer => {
+    const button=document.createElement("button");
+    button.innerHTML=answer.text;
+    button.classList.add("btn1");
+    answerB.appendChild(button);
+    if (answer.correct){
+        button.dataset.correct=answer.correct;
+    }
+    button.addEventListener("click",answerSelected);
+
+});
+}
+
+function resetQuestion(){
+    nextbutton.style.display="none";
+    while(answerB.firstChild)
+        answerB.removeChild(answerB.firstChild)
+
+}
+
+function answerSelected(a){
+    const selectedButton=a.target;
+    const correct=selectedButton.dataset.correct==="true";
+    if(correct){
+        selectedButton.classList.add("correct");
+        score++;
+    }
+    else{
+        selectedButton.classList.add("incorrect");
+    }
+    Array.from(answerB.children).forEach(button=>{
+        if(button.dataset.correct==="true"){
+            button.classList.add("correct");
+        }
+        button.disabled=true;
+    });
+    nextbutton.style.display="block";
+
+
+}
+
+function showscore(){
+    resetQuestion();
+    questionelem.innerHTML=`You scored ${score} out of ${questions.length}!`;
+    nextbutton.innerHTML="PLAY AGAIN";
+    nextbutton.style.display="block";
+}
+function handleNext(){
+    questionindex++;
+    if(questionindex<questions.length){
+        displayQuestion();
+    }
+    else{
+        showscore();
+    }
+
+}
+nextbutton.addEventListener("click",()=>{
+    if(questionindex<questions.length){
+        handleNext();
+    }
+    else{
+        startquiz();
+    }
+
+});
+
+startquiz();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,86 @@
+*{
+    margin:0;
+    padding:0;
+    font-family: 'Times New Roman', Times, serif;
+    box-sizing: border-box;
+}
+
+body{
+    background-color: cadetblue;
+}
+
+.app{
+        width: 90%;
+        max-width: 800px;       
+        background-color: white; 
+        margin:100px auto 0;
+        border: 1px solid #ccc;  
+        border-radius:10px;  
+        padding: 30px;                       
+
+    }
+.app h1{
+    text-align: center;
+    font-weight:25px;
+    color:black;
+    padding-bottom: 30px;
+    font-weight: 600;
+}
+
+.question{
+    padding: 20px 0;
+}
+
+.question h2{
+    text-align:center;
+    font-size: 20px;
+    color:black;
+    font-weight:400;
+}
+
+.btn1{
+    background-color: #4c7faf;
+    color: #ffffff;
+    font-weight: 600;
+    width: 100%;
+    border: 2px solid transparent;
+    padding: 12px 0;
+    text-align: left;
+    margin: 12px 0;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.5s ease;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.btn1:hover:not([disabled]) {
+    background-color: black;
+    border: 2px solid #ffffff;
+    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15);
+    transform: translateY(-3px);
+}
+
+.btn1:disabled{
+    cursor:no-drop;
+}
+
+#next{
+    background-color: #4caf93;
+    color: #ffffff;
+    font-weight: 400;
+    border: 2px solid transparent;
+    width: 20%;
+    padding: 8px 0;
+    margin: 8px auto 0;
+    cursor: pointer;
+    border-radius: 20px;
+    display: block;
+}
+
+.correct{
+    background-color: Green;
+}
+
+.incorrect{
+    background-color: red;
+}