Commit 02c34abd authored by BooDonky's avatar BooDonky
Browse files

Quiz Done

parent 72534efd
......@@ -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
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):
......
......@@ -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)
This image diff could not be displayed because it is too large. You can view the blob instead.
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
// 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
@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
......@@ -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>
</div>