Add files via upload

ST1LLWATER · Oct 8, 2022 · 3cf91d5 · 3cf91d5
1 parent 0c9ee4a
commit 3cf91d5
Show file tree

Hide file tree

Showing 10 changed files with 820 additions and 0 deletions.
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/correct.png b/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/correct.png
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/logo.png b/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/logo.png
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/qimg1.jpg b/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/qimg1.jpg
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/qimg2.jpg b/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/qimg2.jpg
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/qimg3.jpg b/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/qimg3.jpg
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/wrong.png b/Js-Projects/Quizzzeerrrrrr Quiz Web App/images/wrong.png
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/index.html b/Js-Projects/Quizzzeerrrrrr Quiz Web 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">
+    <link rel="stylesheet" href="style.css">
+    <script src="/firebase.js"></script>
+    <title>Quizzzeerrrrrr</title>
+</head>
+<body>
+    <header>
+        <div class="title">Quizzzeerrrrrr<img src="Img/logo.png">
+            </div>
+    </header>
+    <div class="home-box custom-box">
+        <h3>Instructions</h3>
+        <p>Total number of questions: <span class="total-questions"></span></p>
+        <p>Correct Answer:<span> 1 Point</span></p>
+        <p>Wrong Answer:<span> 0 Point</span></p>
+        <p>Once you move to the next question, you won't be able to come back to previous questions. So attempt carefully.</p>
+        <p>You can attempt the quiz any number of times. After the end of each attempt your results will show up.</p>
+        <button type="button" class="btn" onclick="startQuiz()">Start Quiz</button>
+    </div>
+
+    <div class="quiz-box custom-box hide">
+        <header>
+            <div class="timer">
+                <div class="time_left">Time Left</div>
+                <div class="timer_sec">10</div>
+            </div>
+        </header>
+        <div class="question-number">
+        </div>
+        <div class="question-text">
+        </div>
+        <div class="option-container">
+        </div>
+        <div class="next-question-btn">
+            <button type="button" class="btn" onclick="next()">Next</button>
+        </div>
+        <div class="answers-indicator">
+        </div>
+    </div>
+    <div class="result-box custom-box hide">
+        <h1>Thank You for taking the Quiz!</h1>
+        <h3>Your Result</h3>
+        <table>
+            <tr>
+                <td>Total Questions</td>
+                <td><span class="total-questions"></span></td>
+            </tr>
+            <tr>
+                <td>Attempt</td>
+                <td><span class="total-attempt"></span></td>
+            </tr>
+            <tr>
+                <td>Correct</td>
+                <td><span class="total-correct"></span></td>
+            </tr>
+            <tr>
+                <td>Wrong</td>
+                <td><span class="total-wrong"></span></td>
+            </tr>
+            <tr>
+                <td>Percentage</td>
+                <td><span class="percentage"></span></td>
+            </tr>
+            <tr>
+                <td>Your Total Score</td>
+                <td><span class="total-score"></span></td>
+            </tr>
+        </table>
+        <button type="button" class="btn" onclick="tryAgainQuiz()">Try Again</button>
+        <button type="button" class="btn" onclick="goToHome()">Go to Home</button>
+    </div>
+    <script src="js/question.js" ></script>
+    <script src="js/app.js" ></script>
+</body>
+</html>
diff --git a/Js-Projects/Quizzzeerrrrrr Quiz Web App/js/app.js b/Js-Projects/Quizzzeerrrrrr Quiz Web App/js/app.js
@@ -0,0 +1,206 @@
+const questionNumber = document.querySelector(".question-number");
+const questionText =  document.querySelector(".question-text");
+const optionContainer =  document.querySelector(".option-container");
+const answersIndicatorContainer =  document.querySelector(".answers-indicator");
+const homeBox = document.querySelector(".home-box");
+const quizBox = document.querySelector(".quiz-box");
+const resultBox = document.querySelector(".result-box");
+const timeCount = document.querySelector(".timer  .timer_sec"); 
+
+let questionLimit= 15; //quiz.length if you want all questions
+let questionCounter = 0;
+let currentQuestion;
+let availableQuestions=[];
+let availableOptions=[];
+let correctAnswer =0;
+let attempts=0;
+let counter;
+let timeValue=10;
+
+// push the questions into availableQuestions Array
+function setAvailableQuestions(){
+    const totalQuestion = quiz.length;
+    for(let i=0; i< totalQuestion;i++){
+       availableQuestions.push(quiz[i]);
+    }
+}
+//set new question no, question and options
+function getNewQuestion(){
+    console.log(availableQuestions);
+    console.log(quiz.length);
+    //question number
+    questionNumber.innerHTML = "Question " + (questionCounter+1)+" of " + questionLimit;
+
+    const questionIndex = availableQuestions[Math.floor(Math.random() *availableQuestions.length)]
+    currentQuestion=questionIndex;
+    questionText.innerHTML =  currentQuestion.q;
+    const index1 = availableQuestions.indexOf(questionIndex);//get position of 'questionIndex'
+
+    availableQuestions.splice(index1,1);//removes the question already shown to avoid repetition
+    console.log(questionIndex);
+    console.log(availableQuestions);
+    if(currentQuestion.hasOwnProperty("img")){
+        const img = document.createElement("img");
+        img.src = currentQuestion.img;
+        questionText.appendChild(img);
+    }
+    //length of options array
+    const optionLen = currentQuestion.options.length;
+    for(let i=0;i<optionLen;i++)
+    {
+        availableOptions.push(i);
+    }
+
+    optionContainer.innerHTML='';
+    let animationDelay=0.2;
+
+    for(let i=0;i<optionLen;i++)
+    {
+        const optionIndex = availableOptions[Math.floor(Math.random() *availableOptions.length)];
+
+        const index2 = availableOptions.indexOf(optionIndex);
+
+        availableOptions.splice(index2,1);//removes options to avoid repetition
+
+        const option = document.createElement("div");
+        option.innerHTML = currentQuestion.options[optionIndex];
+        option.id = optionIndex;
+        option.style.animationDelay=animationDelay+'s';
+        animationDelay=animationDelay+ 0.1;
+        option.className = "option";
+        optionContainer.appendChild(option);
+        option.setAttribute("onclick","getResult(this)");
+    }
+    questionCounter++;
+}
+
+//result of currently attempted question
+function getResult(element){
+     clearInterval(counter);
+    const id= parseInt(element.id);
+    console.log(id);
+    //find answer by comparing id of clicked option
+    if(id === currentQuestion.answer){
+        element.classList.add("correct");//set green colour to correct option
+        //add indicator to correct mark
+        updateAnswerIndicator("correct");
+        correctAnswer++;
+    }
+    else{
+        element.classList.add("wrong");//set red colour to incorrect option
+        //add indicator to wrong mark
+         updateAnswerIndicator("wrong");
+        //mark correct option green simultaneously with marking wrong option red
+        const optionLen= optionContainer.children.length;
+         for(let i=0;i<optionLen;i++){
+            if(parseInt(optionContainer.children[i].id)=== currentQuestion.answer){
+                optionContainer.children[i].classList.add("correct");
+        }
+    }
+    }
+    attempts++;
+    unclickableoptions();
+}
+//all options unclickable once an option is selected
+function unclickableoptions(){
+    const optionLen= optionContainer.children.length;
+    for(let i=0;i<optionLen;i++)
+    {
+        optionContainer.children[i].classList.add("already-answered");
+    }
+}
+ function answersIndicator(){
+    answersIndicatorContainer.innerHTML='';
+    const totalQuestion = questionLimit;
+    for(let i=0;i<totalQuestion;i++)
+     {
+        const indicator= document.createElement("div");
+         answersIndicatorContainer.appendChild(indicator);
+    }
+ }
+   function  updateAnswerIndicator(markType){
+        answersIndicatorContainer.children[questionCounter-1].classList.add(markType);
+    }
+function next(){
+    if(questionCounter === questionLimit){
+        console.log("quiz over");
+        quizOver();
+    }
+    else
+        getNewQuestion();
+        clearInterval(counter);
+        startTimer(timeValue);
+}
+function quizOver(){
+    //hide quiz box
+    quizBox.classList.add("hide");
+    //show result box
+    resultBox.classList.remove("hide");
+    quizResult();
+}
+
+function quizResult(){
+    resultBox.querySelector(".total-questions").innerHTML= questionLimit;
+    resultBox.querySelector(".total-attempt").innerHTML= attempts;
+    resultBox.querySelector(".total-correct").innerHTML= correctAnswer;
+    resultBox.querySelector(".total-wrong").innerHTML=attempts-correctAnswer;
+    let percentage= correctAnswer/questionLimit;
+    resultBox.querySelector(".percentage").innerHTML=percentage.toFixed(4)*100+"%";
+    resultBox.querySelector(".total-score").innerHTML= correctAnswer +" / "+questionLimit;
+}
+function resetQuiz(){
+    questionCounter=0;
+    correctAnswer=0;
+    attempts=0;
+    availableQuestions=[];
+    clearInterval(counter);
+}
+function tryAgainQuiz(){
+    //hide result box
+    resultBox.classList.add("hide");
+    //showing quiz box
+    quizBox.classList.remove("hide");
+    resetQuiz();
+    startQuiz();
+}
+
+function goToHome(){
+    //hide result box
+    resultBox.classList.add("hide");
+    //showing quiz box
+    homeBox.classList.remove("hide");
+    resetQuiz();
+}
+
+function startQuiz(){
+
+    homeBox.classList.add("hide");//hide homebox on start
+    quizBox.classList.remove("hide");//show quiz box on start
+    setAvailableQuestions();
+    getNewQuestion();
+    startTimer(timeValue);
+    answersIndicator();
+}
+
+function startTimer(time){
+    counter = setInterval(timer, 1000);
+    function timer(){
+        timeCount.textContent=time;
+        time--;
+        if(time<9)
+        {
+            let addZero = timeCount.textContent;
+            timeCount.textContent="0"+ addZero;
+        }
+        if(time<0)
+        {
+            clearInterval(counter);
+            timeCount.textContent="00";
+            next();
+        }
+    }
+}
+
+window.onload = function(){
+    homeBox.querySelector(".total-questions").innerHTML = questionLimit;
+}