rudra016 · sudo-Satvik · Oct 2, 2023
diff --git a/Quiz-app/index.html b/Quiz-app/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz Web App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="panel">
+        <h1>Quiz</h1>
+        <hr>
+        <div class="question" id="ques"></div>
+        <div class="options" id="opt"></div>
+        <button onclick="checkAns()" id="btn">SUBMIT</button>
+        <div id="score"></div>
+        <script src="script.js"></script>
+    </div>
+</body>
+</html>
diff --git a/Quiz-app/script.js b/Quiz-app/script.js
@@ -0,0 +1,88 @@
+const Questions = [{
+    q: "What is capital of India?",
+    a: [{ text: "Gandhinagar", isCorrect: false },
+    { text: "Surat", isCorrect: false },
+    { text: "Delhi", isCorrect: true },
+    { text: "Mumbai", isCorrect: false }
+    ]
+
+},
+{
+    q: "What is the capital of Thailand?",
+    a: [{ text: "Lampang", isCorrect: false, isSelected: false },
+    { text: "Phuket", isCorrect: false },
+    { text: "Ayutthaya", isCorrect: false },
+    { text: "Bangkok", isCorrect: true }
+    ]
+
+},
+{
+    q: "What is the capital of Gujarat",
+    a: [{ text: "Surat", isCorrect: false },
+    { text: "Vadodara", isCorrect: false },
+    { text: "Gandhinagar", isCorrect: true },
+    { text: "Rajkot", isCorrect: false }
+    ]
+
+}
+
+]
+
+let currQuestion = 0
+let score = 0
+
+function loadQues() {
+    const question = document.getElementById("ques")
+    const opt = document.getElementById("opt")
+
+    question.textContent = Questions[currQuestion].q;
+    opt.innerHTML = ""
+
+    for (let i = 0; i < Questions[currQuestion].a.length; i++) {
+        const choicesdiv = document.createElement("div");
+        const choice = document.createElement("input");
+        const choiceLabel = document.createElement("label");
+
+        choice.type = "radio";
+        choice.name = "answer";
+        choice.value = i;
+
+        choiceLabel.textContent = Questions[currQuestion].a[i].text;
+
+        choicesdiv.appendChild(choice);
+        choicesdiv.appendChild(choiceLabel);
+        opt.appendChild(choicesdiv);
+    }
+}
+
+loadQues();
+
+function loadScore() {
+    const totalScore = document.getElementById("score")
+    totalScore.textContent = `You scored ${score} out of ${Questions.length}`
+}
+
+
+function nextQuestion() {
+    if (currQuestion < Questions.length - 1) {
+        currQuestion++;
+        loadQues();
+    } else {
+        document.getElementById("opt").remove()
+        document.getElementById("ques").remove()
+        document.getElementById("btn").remove()
+        loadScore();
+    }
+}
+
+function checkAns() {
+    const selectedAns = parseInt(document.querySelector('input[name="answer"]:checked').value);
+
+    if (Questions[currQuestion].a[selectedAns].isCorrect) {
+        score++;
+        console.log("Correct")
+        nextQuestion();
+    } else {
+        nextQuestion();
+    }
+}
diff --git a/Quiz-app/style.css b/Quiz-app/style.css
@@ -0,0 +1,61 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body{
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(60deg,#00a2ff,#c813ff);
+    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.panel{
+    background: #fff;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    width: 50rem;
+    height: auto;
+    padding: 50px 50px 50px 50px;
+}
+
+.panel>h1{
+    margin-bottom: 20px;
+    display: block;
+    text-align: center;
+}
+
+.panel>hr{
+    margin-bottom: 20px;
+}
+
+.panel .question{
+    font-weight: 500;
+    font-size: 20px;
+    margin-bottom: 10px;
+}
+
+.panel .options{
+    display: grid;
+    grid-gap: 15px;
+    margin-bottom: 30px;
+}
+
+#btn{
+    background: linear-gradient(60deg,#00a2ff,#c813ff);
+    border: none;
+    padding: 15px 50px;
+    margin: 0 auto;
+    display: block;
+    color: #fff;
+    font-weight: 600;
+    transition: background 0.5s ease-in;
+}
+
+#btn:hover{
+    background: linear-gradient(120deg,#00a2ff,#c813ff);
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
+}