Quiz Done

Python Projects/Hostien Buyer/main.kv

@@ -55,6 +55,10 @@
             GridLayout:
                 cols: 1
 
+                Button:
+                    text: "Clear"
+                    on_press: root.clear_btn()
+
                 Button:
                     text: "OK"
                     on_press: root.ok_btn()
\ No newline at end of file

Python Projects/Hostien Buyer/main.py

 from kivy.app import App
 from kivy.uix.widget import Widget
 from kivy.properties import ObjectProperty
-from modules.webscript import start_werbdriver
+from modules.webscript import start_webdriver, clear_webdriver
 
 
 class Grid(Widget):
@@ -14,7 +14,10 @@ class Grid(Widget):
         "\nGrosse Hostien: ", self.big.text,
         "\nSonstiges", self.any.text )
 
-        start_werbdriver(self.small.text,  self.big.text, self.any.text)
+        start_webdriver(self.small.text,  self.big.text, self.any.text)
+
+    def clear_btn(self):
+        clear_webdriver()
 
     
 class Main(App):

Python Projects/Hostien Buyer/modules/webscript.py

@@ -4,10 +4,10 @@ import time
 
 from modules.config import kirchengemeinde, namen, ort, telefon, email, rechnungadd
 
+driver = webdriver.Chrome(ChromeDriverManager().install())
+driver.get("https://www.kloster-gerlisberg.ch/unsere-produkte/hostien/")
 
-def start_werbdriver(small, big, any):
-    driver = webdriver.Chrome(ChromeDriverManager().install())
-    driver.get("https://www.kloster-gerlisberg.ch/unsere-produkte/hostien/")
+def start_webdriver(small, big, any):
 
     driver.find_element_by_xpath("//*[@id='m7f907ad0f91cb1b50']").send_keys(kirchengemeinde)
     driver.find_element_by_xpath("//*[@id='m7f907ad0f91cb1b51']").send_keys(namen)
@@ -26,7 +26,8 @@ def start_werbdriver(small, big, any):
         driver.find_element_by_xpath("//*[@id='m7f907ad0f91cb1b511']").send_keys("Laien Hostien weiss: {} Stücke\n".format(small) + "Messopfer Hostien weiss: {} Stücke \n".format(big))
 
 
+def clear_webdriver():
+    driver.find_element_by_xpath("//*[@id='m7f907ad0f91cb1b511']").clear()
 
-    time.sleep(2000)
 
 

Web Projects/Q/Js/app.js

+
+const numberBtn = document.querySelectorAll(".num-btn")
+const questionText = document.querySelector('.question-text');
+const optionContainer = document.querySelector('.option-container');
+
+const numBox = document.querySelector(".number-box")
+const homeBox = document.querySelector(".home-box")
+const quizBox = document.querySelector(".quiz-box")
+const resultBox = document.querySelector(".results-box")
+
+let questionCounter = 0;
+let currentQuestion;
+let availableQuestions = [];
+let availableOptions = [];
+
+//Click on button and show it in the textinput
+function getNumber()
+{   
+    const input = document.getElementById("input-box");
+    const keypad = document.getElementById("keypad");
+    const numButtons = keypad.getElementsByTagName("button");
+    
+    for (var i = 0; i < numButtons.length; i++) {
+        numButtons[i].onclick = function () {
+            input.value = input.value + this.innerHTML;
+    }
+}
+}
+
+
+function correctNumber()
+{
+    const textvalue = document.getElementById("input-box");
+
+    if(textvalue.value == "1325")
+    {
+        start()
+    }
+    else { 
+        alert("Nummer ist Leider Falsch :(( versuch es mal mit 1325 ;)")
+    }
+}
+
+function start()
+{
+    // hide number Box
+    numBox.classList.add("hide");
+    // show home box
+    homeBox.classList.remove("hide");
+}
+
+
+
+
+// push the questions into available Array
+function setAvailableQuestions(){
+    const totalQuestions = quiz.length;
+    for(let i=0; i<totalQuestions; i++ )
+    {
+        availableQuestions.push(quiz[i])
+    }
+    console.log(availableQuestions)
+}
+
+// set question number and question and options
+function getNewQuestions(){
+    // set question text
+    // get random question
+    const questionIndex = availableQuestions[Math.floor(Math.random() * availableQuestions.length)]
+    currentQuestion = questionIndex;
+    questionText.innerHTML = currentQuestion.q;
+    //console.log(questionIndex)
+    // get the position of "questionIndex" from availableQuestion Array
+    const index1 = availableQuestions.indexOf(questionIndex);
+    // remove the "questionIndex" from availableQuestion Array, so that the question does not repeat.
+    availableQuestions.splice(index1, 1);
+    // show question img if "img" property exists
+    if(currentQuestion.hasOwnProperty("img"))
+    {
+        const img = document.createElement("img");
+        img.src = currentQuestion.img;
+        questionText.appendChild(img);
+    }
+    
+    // set options
+    // get the lenght of options
+    const optionLen = currentQuestion.options.length;
+    // push options into availableOptions Array
+    for(let i=0; i<optionLen; i++)
+    {
+        availableOptions.push(i)
+    }
+
+    optionContainer.innerHTML = "";
+    let animationDelay = 0.15;
+    // create options in innerHTML  
+    for(let i=0; i<optionLen;i++)
+    {   
+        // random Options
+        const optionIndex = availableOptions[Math.floor(Math.random() * availableOptions.length)]
+        // get the position of "optionIndex" from the availableOptions
+        const index2 = availableOptions.indexOf(optionIndex);
+        // remove the position of "optionIndex" from the availableOptions, so that the option does not repeat 
+        availableOptions.splice(index2,1);
+
+        const option = document.createElement("div");
+        option.innerHTML = currentQuestion.options[optionIndex];
+        option.id = optionIndex;
+        option.style.animationDelay = animationDelay + "s";
+        animationDelay = animationDelay + 0.15;
+        option.className = "option";
+        optionContainer.appendChild(option);
+        option.setAttribute("onclick", "getResult(this)");
+    }
+    questionCounter++;
+    
+}
+// get the result of current attempt question
+function getResult(element)
+{
+    const id = parseInt(element.id);
+    // get the answer by comparing the id of clicked option
+    if(id === currentQuestion.answer)
+    {   
+        // set the green color to the correct option
+        element.classList.add("correct")
+    }
+    else
+    {
+        element.classList.add("wrong")
+
+    }
+}
+
+function next()
+{
+    if(questionCounter === quiz.length)
+    {
+        quizOver();
+    }
+    else
+    {
+     getNewQuestions();   
+    }
+
+}
+
+function quizOver(){
+    // hide quiz quizBox
+    quizBox.classList.add("hide");
+    // show result Box
+    resultBox.classList.remove("hide");
+}
+function resetQuiz()
+{
+    questionCounter = 0;
+}
+
+function tryAgain()
+{
+    // hide result Box
+    resultBox.classList.add("hide");
+     // show quiz Box
+    quizBox.classList.remove("hide");
+    resetQuiz();
+    startQuiz();
+}
+
+function startQuiz(){
+    // hide home Box
+    homeBox.classList.add("hide");
+    // show quiz Box
+    quizBox.classList.remove("hide");
+
+    // first will set all question in availableQuestions Array
+    setAvailableQuestions();
+    // second we will call getNewQuestions(); function
+    getNewQuestions();
+}
+
+window.onload = function()
+{
+    getNumber();
+}
\ No newline at end of file

Web Projects/Q/Js/questions.js

+// Array of Objects
+const quiz = [
+  {
+    q: "Wo wurde diese Bild gemacht?",
+    options: ["Bern","Basel","Zürich","Luzern"],
+    answer: 2,
+    img: "Files/img/eth.JPG"
+  },
+  {
+    q: "Was für eine Schuh grösse hat Dominik?",
+    options: ["43","44","45","46"],
+    answer: 1
+  },
+  {
+    q: "Was können die Zahlen 1325 sein?",
+    options: ["Random Zahlen","Insider Zahlen","Zeitspanne","Geheim Passwort"],
+    answer: 2
+  },
+  {
+    q: "An chim khong auf Deutsch?",
+    options: ["Willst du Frosch essen?","Willst du Katze essen?","Willst du Vogel essen?","Willst du Fisch essen?"],
+    answer: 2
+  },
+  {
+    q: "Wie gross ist Peppa Pig?",
+    options: ["2m 15cm","3m 10cm","2m 50cm","1m 80cm"],
+    answer: 0
+  },
+  {
+    q: "Was bekommst du dieses Jahr zu Weihnachten von Dominik  geschenkt?",
+    options: ["etwas mit Peppa Pig","Süssigkeiten","Klamotten","Schmuck"],
+  },
+
+  {
+    q: "Nyu Nyu Nyu ich bin ein ________",
+    options: ["Nyu","Katze","Miau","Wau wau"],
+    answer: 0
+  },
+
+  {
+    q: "Baguette Baguette ich bin ein _____",
+    options: ["Wau Wau","Miau Miau","Nook Nook","Baguette"],
+    answer: 3
+  },
+  {
+    q: "Was bist du?",
+    options: ["Eine Katze","Eine Sushirolle","Ein Mensch","Wau wau"],
+    answer: 2,
+    img: "Files/img/rolle.jpg"
+  },
+  {
+    q: "Was bist du hier?",
+    options: ["Eine Katze","Eine Sushirolle","Ein Mensch","Wau wau"],
+    answer: 1,
+    img: "Files/img/rolle.jpg"
+  },
+  {
+    q: "Choke me like you hate me, but you love me \nLowkey wanna date me when you fuck me _____",
+    options: ["Baby, I'm...","uwu","Coke in my nose","Wau wau"],
+    answer: 1
+  },
+  {
+    q: "Was war geiler Chilli oder Knoblauch Sauce?",
+    options: ["Chilli","Knoblauch"],
+    answer: 1
+  },
+  {
+    q: "Tell me what you wanna hear ____",
+    options: ["I just wanna have you here","Daddy", "Going down the way it is", "Lemme whisper in your ear"],
+    answer: 3
+  },
+  {
+    q: "Wie viele Freunde hast du auf Facebook?",
+    options: ["491","523", "378", "512"],
+    answer: 0
+  },
+  {
+    q: "Wie viele Followers hast du auf dieser Seite, wo ich dieses Bild gefunden habe?",
+    options: ["3","0", "über 10", "5"],
+    answer: 0,
+    img: "Files/img/pinterest.jpg"
+  },
+  {
+    q: "Seit welchem Jahr bist du auf dieser Seite mit dem Bild?",
+    options: ["2014","2015", "2013", "2016"],
+    answer: 3,
+    img: "Files/img/twitter.jpg"
+  },
+  {
+    q: "Wann wurde dieses Bild gemacht?",
+    options: ["August","Februar", "März", "Oktober"],
+    answer: 3,
+    img: "Files/img/Lee.jpg"
+  },
+  {
+    q: "Super Idol",
+    options: ["Super Idol"],
+    answer: 0,
+    img: "Files/img/super-idol.gif"
+  },
+
+
+
+
+
+
+  
+]
\ No newline at end of file

Web Projects/Q/Style/style.css

+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap');
+
+body{
+    margin: 0;
+    font-size: 16px;
+    background-color: #FFB6C1;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+}
+    
+*{
+    box-sizing: border-box;
+    margin:0;
+    padding:0;
+    outline: none;
+}
+ 
+.custom-box{
+    max-width: 70%;
+    background-color: #ffffff;
+    margin: 40px auto;
+    padding: 30px;
+    border-radius: 10px;
+    animation: fadeInRight 1s ease;
+}
+@keyframes fadeInRight
+{
+    0%{
+        transform: translateX(40px);
+        opacity: 0;
+    }
+    100%{
+        transform: translateX(0px);
+        opacity: 1;
+    }
+}
+
+.custom-box::before,
+.custom-box::after
+{
+    content: "";
+    clear: both;
+    display: table;
+}
+.custom-box.hide
+{
+    display:none;
+}
+
+.home-box h3{
+    font-size: 18px;
+    color:#000000;
+    margin-bottom: 15px;
+    Line-height: 25px;
+}
+
+.home-box p{
+font-size: 16px;
+margin-bottom: 10px;
+Line-height: 22px;
+color:#000000;
+font-weight: 400;
+}
+
+.home-box p span{
+font-weight: 500;
+}
+
+.home-box .btn{
+    margin-top: 10px;
+    
+}
+
+.number-box 
+{
+    text-align: center;
+    margin-bottom: 20px;
+    line-height: 25px;
+    
+}
+
+.number-box #input-box
+{
+    line-height: 25px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.number-box .num-btn
+{   
+    border-radius: 8px;
+    font-family: "Open Sans", "sans-serif";
+    font-weight: 400;
+    padding: 5px 10px;
+    margin: 5px;
+    cursor: pointer;
+}
+
+.number-box .btn
+{
+    padding: 10px 35px;
+}
+
+.btn{
+    padding: 15px 45px;
+    background-color: #FFB6C1;
+    color: black;
+    border:none;
+    border-radius: 8px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    cursor: pointer;
+    display: inline-block;
+
+}
+
+.quiz-box .question-text,
+.quiz-box .option-container,
+.quiz-box .next-question-btn
+{
+    width: 100%;
+    float: left;
+}
+
+.quiz-box .question-text img
+{
+    max-width: 300px;
+    display: block;
+    margin-top: 1px;
+
+
+}
+
+.quiz-box .question-text
+{
+    font-size: 18px;
+    color:#000000;
+    margin-bottom: 10px;
+    Line-height: 20px;
+    font-weight: 400;
+    padding: 10px 0;
+}
+
+.quiz-box .option-container .option 
+{
+ background-color: #FFB6C1;
+ padding: 13px 15px;
+ font-size: 16px;
+ line-height: 22px;
+ color: #000000;
+ border-radius: 8px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ text-transform: capitalize;
+ opacity: 0;
+ animation: fadeIn 0.3s ease forwards;
+ position: relative;
+ overflow: hidden;
+
+}
+@keyframes fadeIn{
+    0%{
+        opacity:0;
+    }
+    100%{
+        opacity:1;
+    }
+}
+
+.quiz-box .option-container .option.correct::before{
+content: "";
+position: absolute;
+left: 0;
+top: 0;
+height: 100%;
+width: 100%;
+background-color: #27fa5c;
+z-index: -1;
+animation:
+ slideInLeft .5s forwards;
+}
+.quiz-box .option-container .option.wrong::before{
+content: "";
+position: absolute;
+left: 0;
+top: 0;
+height: 100%;
+width: 100%;
+background-color: #f34e6a;
+z-index: -1;
+animation: slideInLeft .5s forwards;
+}
+
+@keyframes slideInLeft{
+    0%{
+        transform: translateX(-100%)
+    }
+    100%
+    {
+        transform: translateX(-0%)
+    }
+}
+
+.code 
+{   
+    text-align: center;
+    line-height: 50px;
+    margin-top: 40px;
+    margin-bottom: 20px;
+}
+
+.results-box .try-btn
+{
+    margin-top: 50px;
+    text-align: center;
+}
\ No newline at end of file

Web Projects/Q/index.html

@@ -2,14 +2,70 @@
 <html>
     <head>
         <title>Quiz App</title>
-        <meta name="viewport" content="width=Ddevice-width, initial-scale=1">
-        <link rel="stylesheet" href="style.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="Style/style.css">
     </head>
     <body>
-        <div class="home-box">
+
+        <div class="number-box custom-box">
+            <h3>SICHERHEITSCODE</h3>
+            <div>Gebe hier den Code ein</div>
+            <input type="text" id="input-box"/>
+            <div id="keypad">
+                <div>
+                    <button class="num-btn">7</button>
+                    <button class="num-btn">8</button>
+                    <button class="num-btn">9</button>
+                </div>
+                <div>
+                    <button class="num-btn">4</button>
+                    <button class="num-btn">5</button>
+                    <button class="num-btn">6</button>