Merge pull request khushi-purwar#16 from TechnicalAmanjeet/simple_qui…

…z_app done with Simple quiz app .
rittikadeb · Dec 25, 2021 · 98a2c95 · 98a2c95
2 parents 2607ee0 + 5d8f90e
commit 98a2c95
Show file tree

Hide file tree

Showing 16 changed files with 347 additions and 66 deletions.
diff --git a/16.simple_quiz_App/README.md b/16.simple_quiz_App/README.md
@@ -0,0 +1,32 @@
+<h1>Simple Quiz App.</h1>
+
+<h2>Overview</h2>
+
+<p>This application is made for beginners.User can use this web app to take quiz.</p>
+
+<h3>Tech Stack</h3>
+
+![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
+![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
+![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+
+Screenshots:
+
+![Simple_Quiz_App_ss1](https://github.com/TechnicalAmanjeet/WebDev-ProjectKart/blob/simple_quiz_app/16.simple_quiz_App/images/ss1.png?raw=true)
+
+
+![Simple_Quiz_App_ss2](https://github.com/TechnicalAmanjeet/WebDev-ProjectKart/blob/simple_quiz_app/16.simple_quiz_App/images/ss2.png?raw=true)
+
+
+![Simple_Quiz_App_ss3](https://github.com/TechnicalAmanjeet/WebDev-ProjectKart/blob/simple_quiz_app/16.simple_quiz_App/images/ss3.png?raw=true)
+
+
+![Simple_Quiz_App_ss4](https://github.com/TechnicalAmanjeet/WebDev-ProjectKart/blob/simple_quiz_app/16.simple_quiz_App/images/ss4.png?raw=true)
+
+
+![Simple_Quiz_App_ss5](https://github.com/TechnicalAmanjeet/WebDev-ProjectKart/blob/simple_quiz_app/16.simple_quiz_App/images/ss5.png?raw=true)
+
+
+
+
+
diff --git a/Simple Quiz App/images/logo.jpg → 16.simple_quiz_App/images/logo.jpg b/Simple Quiz App/images/logo.jpg → 16.simple_quiz_App/images/logo.jpg
diff --git a/...Quiz App/images/pexels-photo-4974914.jpeg → ...quiz_App/images/pexels-photo-4974914.jpeg b/...Quiz App/images/pexels-photo-4974914.jpeg → ...quiz_App/images/pexels-photo-4974914.jpeg
diff --git a/16.simple_quiz_App/images/ss1.png b/16.simple_quiz_App/images/ss1.png
diff --git a/16.simple_quiz_App/images/ss2.png b/16.simple_quiz_App/images/ss2.png
diff --git a/16.simple_quiz_App/images/ss3.png b/16.simple_quiz_App/images/ss3.png
diff --git a/16.simple_quiz_App/images/ss4.png b/16.simple_quiz_App/images/ss4.png
diff --git a/16.simple_quiz_App/images/ss5.png b/16.simple_quiz_App/images/ss5.png
diff --git a/16.simple_quiz_App/index.html b/16.simple_quiz_App/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Quiz App</title>
+
+    <!-- linking custom stylesheet   -->
+    <link rel="stylesheet" href="./stylesheet/style.css">
+
+    <!-- linking google fonts css file -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
+
+
+</head>
+<body>
+
+    <!-- ********* write html code from here ******************  -->
+
+
+
+    <header>
+        <div class="circle" id="Total_Time">
+           0
+        </div>
+        <h1>Simple Quiz App</h1>
+        <div class="circle" id="Time_Per_Qeustion">
+            0
+        </div>
+    </header>
+
+    <main id="questionDiv">
+
+            <!-- <div class="question">
+
+                    <h2>Q No. ${qNumber}</h2>
+                    <h4>${qNumber}. What is the Capital City of India?</h4>
+                    
+                    <h5><input class="radio" type="radio" name="answer" value="Bhagalpur"> <label for="answer">Bhagalpur</label></h5>
+                    
+                    <h5><input class="radio" type="radio" name="answer" value="Patna"> <label for="answer">Munger</label></h5>
+                    
+                    <h5><input class="radio" type="radio" name="answer" value="Gaya"> <label for="answer">Gaya</label></h5>
+                    
+                    <h5><input class="radio" type="radio" name="answer" value="Munger"> <label for="answer">Munger</label></h5>
+
+                    <button type="submit" id="submit">Submit</button>
+                    
+            </div>
+
+            <p id="output"></p> -->
+
+        </main>
+
+        <button type="submit" id="submit">Submit</button>
+
+
+
+
+
+
+    <!-- ********* write html code ends here ******************  -->
+
+
+    <!-- ************** javascript section starts ********** -->
+
+
+    <!-- linking font awesone -->
+    <!-- <script src="https://kit.fontawesome.com/fd33b06809.js" crossorigin="anonymous"></script> -->
+
+    <!-- ******** linking custom javascript *********** -->
+    <script src="./javascript/index.js"></script>
+
+
+
+</body>
+</html>
diff --git a/16.simple_quiz_App/javascript/index.js b/16.simple_quiz_App/javascript/index.js
@@ -0,0 +1,131 @@
+// making dynamic question set
+
+let questionState = ["Bihar","India","Jharkhand","Mizoram","Gujrat"]
+let answerString = ["Patna","New Delhi","Ranchi","Aizwal","Ahamdabad"];
+let optionString = [
+                ["Bhagalpur",`${answerString[0]}`,"Gaya","Munger"] ,
+                ["Noida",`${answerString[1]}`,"India Gate","Kolkata"] ,
+                [`${answerString[2]}`,"Dhanbaad","Tata","Jamsedpur"] ,
+                ["Kolasib","Imphal",`${answerString[3]}`,"Itanagar"] ,
+                ["Rohtak","Chandigadh","kanpur",`${answerString[4]}`]
+            ];
+
+let questionString=[
+    ` What is the Capital City of ${questionState[0]} ?` ,
+    ` What is the Capital City of ${questionState[1]}?` ,
+    ` What is the Capital City of ${questionState[2]}?` ,
+    ` What is the Capital City of ${questionState[3]}?` ,
+    ` What is the Capital City of ${questionState[4]}?` ,
+];
+
+let userName = prompt("Enter your random UserName?");
+// userOption = userOption.toUpperCase();
+
+// if(userOption[0]!='Y'){
+//     return;
+// }
+
+let QuestionSet =[];
+
+for(let i=0;i<questionString.length;++i){
+    QuestionSet += [`
+        <div class="question">
+        
+        <h4>${i+1}. ${questionString[i]} </h4>
+        
+        <h5><input class="radio" type="radio" name="answer${i}" value="${optionString[i][0]}"> <label for="answer">${optionString[i][0]}</label></h5>
+        
+        <h5><input class="radio" type="radio" name="answer${i}" value="${optionString[i][1]}"> <label for="answer">${optionString[i][1]}</label></h5>
+        
+        <h5><input class="radio" type="radio" name="answer${i}" value="${optionString[i][2]}"> <label for="answer">${optionString[i][2]}</label></h5>
+        
+        <h5><input class="radio" type="radio" name="answer${i}" value="${optionString[i][3]}"> <label for="answer">${optionString[i][3]}</label></h5>
+        
+        
+        
+        </div>
+        
+        <p id="outputFinel"></p>
+        `];
+}
+
+console.log(QuestionSet);
+
+// taking id for submit button . 
+let sumbmitBtn = document.querySelector("#submit");
+
+sumbmitBtn.addEventListener("click",()=>{
+    // call stop time counter to stop the program execution
+    stopTimeCounter(2);
+});
+
+
+// taking id of question div where we will show the question.
+let questionDiv = document.querySelector("#questionDiv");
+questionDiv.innerHTML = QuestionSet;
+
+let timeLeftForQuiz = 180;
+let totalTime = 0;
+// taking id where we will show the timing counter
+const quizCounterId = document.querySelector("#Total_Time");
+quizCounterId.innerHTML = timeLeftForQuiz;
+const Time_Per_Qeustion = document.querySelector("#Time_Per_Qeustion");
+
+let timeCounter = setInterval(() => {
+    // console.log(timeLeftForQuiz);
+    quizCounterId.innerHTML = timeLeftForQuiz;
+    timeLeftForQuiz--;
+
+    Time_Per_Qeustion.innerHTML = totalTime;
+    totalTime++;
+
+    if(timeLeftForQuiz == -2){
+        stopTimeCounter(1);
+    }
+}, 1000);
+
+// creating stop timing counter to end the quiz.
+function stopTimeCounter(time){
+    if(time==2){
+        alert(`Congratulations!! ${userName} ,
+         you have completed your quiz in ${totalTime} sec.`)
+    }
+    else{
+        alert(`oops! ${userName} time is up for the quiz...`);
+    }
+    clearInterval(timeCounter);
+
+    // resultOfQuiz function call;
+    resultOfQuiz();
+}
+
+
+function resultOfQuiz(){
+    let qName="";
+    let rightAnswer =0;
+    for(let i=0;i<5;++i){
+        qName = document.getElementsByName(`answer${i}`);
+        // console.log(qName);
+        for(let j=0;j<4;++j){
+            if(qName[j].checked){
+                if(qName[j].value == answerString[i]){
+                    ++rightAnswer;
+                    console.log(qName[j]);
+                    console.log(answerString[i],rightAnswer);
+                }
+            }
+        }
+    }
+    alert(`${userName} ,
+            you have answered ${rightAnswer} q. Correctly. in ${totalTime} sec.
+             Thankyou So much for taking this quiz.
+    `);
+
+
+}
+
+
+
+
+
+
diff --git a/16.simple_quiz_App/stylesheet/style.css b/16.simple_quiz_App/stylesheet/style.css
@@ -0,0 +1,102 @@
+*{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    /* text-decoration: none; */
+    /* color: whitesmoke; */
+    font-family: Roboto,'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body{
+    background-color: rgb(11, 82, 58);
+    /* width: 100vw; */
+    position: relative;
+}
+
+
+/* ******** custom coding of css starts from here ********  */
+
+header {
+    position: sticky;
+    top: 0;
+    height: 100px;
+    background: rgb(71, 71, 133);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+header h1{
+    color: whitesmoke;
+    font-size: 40px;
+    text-shadow: 2px 2px 4px rgb(255, 12, 24);
+}
+
+
+header .circle{
+    width: 70px;
+    height: 70px;
+    background-color: whitesmoke;
+    color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+    font-weight: bolder;
+    border-radius: 50%;
+}
+
+/* question area starts from here  */
+
+#questionDiv {
+    width: 90%;
+    /* height: 500px; */
+    background-color: #FFF;
+    padding: 20px;
+    margin:40px auto 0 auto;
+    /* display: flex; */
+    /* align-items: center; */
+}
+
+#questionDiv h2{
+    width: 130px;
+    margin: 0 auto 10px auto;
+    color: blueviolet;
+    font-weight: bolder;
+    text-align: center;
+    padding-bottom: 5px;
+    border-bottom: 2px solid black;
+}
+
+#questionDiv h4{
+    font-size: 30px;
+    font-weight: bolder;
+    margin-bottom: 10px;
+}
+
+#questionDiv h5{
+    font-size: 20px;
+    margin-bottom: 5px;
+    color: blue;
+}
+
+#submit{
+    /* margin-top: 10px; */
+    display: block;
+    font-size: 40px;
+    padding: 10px 25px;
+    margin: 16px auto 30px 50px;
+    color: whitesmoke;
+   background-color: blueviolet; 
+   border: none;
+}
+
+input.radio{
+    width: 15px;
+    height: 15px;
+    margin-right: 10px;
+}
+
+#questionDiv #outputFinel{
+    margin-bottom: 30px;
+}
diff --git a/Simple Quiz App/task.txt → 16.simple_quiz_App/task.txt b/Simple Quiz App/task.txt → 16.simple_quiz_App/task.txt