styled facts

BLV-OSAV-USAV · Mar 15, 2024 · 3c16067 · 3c16067
1 parent 0d2baa6
commit 3c16067
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 4 deletions.
diff --git a/js/questions.js b/js/questions.js
@@ -24,7 +24,9 @@ async function CallMe() {
 
     var data =JSON.parse(text)        ;
     for (var j = 0; j < data.data.length; j++){
+        debugger;
         let question = {
+            lesson_learned:data.data[j].lesson_learned,
             numb:  j,
             question:  data.data[j].Question,
 

diff --git a/js/script.js b/js/script.js
@@ -68,7 +68,15 @@ restart_quiz.onclick = ()=>{
 quit_quiz.onclick = ()=>{
     window.location.href = '../index.html'; //reload to homepage
 }
-const next_btn = document.querySelector(".next_btn");
+const next_btn = document.querySelector("#next_btn");
+const close_btn = document.querySelector("#next_fact");
+close_btn.onclick = ()=>{
+    document.getElementById("facts").style.display = "none";
+
+        goNext();
+
+
+}
 const bottom_ques_counter = document.querySelector(".total_que");
 function goNext() {
     if(que_count < questions.length - 1){ //if question count is less than total question length
@@ -88,11 +96,21 @@ function goNext() {
         showResult(); //calling showResult function
     }
 }
+
+function displayFacts(){
+    document.getElementById("facts").style.display = "inline";
+
+}
 // if Next Que button clicked
 next_btn.onclick = ()=>{
-    goNext()
+    if(current_state_success){
+        goNext()
+    }else{
+        displayFacts();
+    }
 
 }
+
 // getting questions and options from array
 function showQuetions(index){
     const que_text = document.querySelector(".que_text");
@@ -110,6 +128,8 @@ function showQuetions(index){
     for(i=0; i < option.length; i++){
         option[i].setAttribute("onclick", "optionSelected(this)");
     }
+
+    document.getElementById("facts_text").innerHTML =questions[index].lesson_learned; 
 }
 // creating the new div tags which for icons
 let tickIconTag = '<div ></div>';

diff --git a/pages/quiz.html b/pages/quiz.html
diff --git a/style/quizz.css b/style/quizz.css
@@ -332,4 +332,67 @@ border: 0;
     color: #fff;
     background: #1AAC9F
 ;
-}
+}
+
+.facts{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    background-color: white;
+    width: 100vw;
+    height: 100vh;
+
+    h1{
+        /* Faktencheck */
+
+
+        position: absolute;
+        width: 161px;
+        height: 32px;
+        left: calc(50% - 161px/2 - 96.5px);
+        top: 75px;
+
+        font-family: 'Digitalt';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 30px;
+        line-height: 32px;
+        /* identical to box height */
+        display: flex;
+        align-items: center;
+        text-align: center;
+        letter-spacing: 0.5px;
+
+        color: #1C2834;
+
+
+            }
+            header{
+                margin-top: 20vh;
+                margin-left: 5vw;
+                /* Frame 23 */
+
+        /* Auto layout */
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0px;
+        gap: 10px;
+
+        width: 90vw;
+        height: 236px;
+
+        background: #1AAC9F;
+        border-radius: 18px;
+
+        /* Inside auto layout */
+        flex: none;
+        order: 0;
+        align-self: stretch;
+        flex-grow: 0;
+
+    }
+}