Commit 9189d00e authored by Matthias Merz's avatar Matthias Merz
Browse files

hornlogik quiz aktueller stand

parent 4b77888b
# Hornlogik-Quiz # Hornlogik-Quiz
gehen sie in die Ordnerstuktur wo die docker-compose.yml sich befindet und starten sie dort eine Powershell oder ein Terminal. Dann führen sie das Kommando docker-compose up aus und können im Browser die Webseite unter localhost erreichen.
services:
logik-app-hornlogik:
image: httpd:latest
container_name: logik-app-hornlogik
volumes:
- ./src:/usr/local/apache2/htdocs:cached
working_dir: /usr/local/apache2/htdocs
ports:
- '80:80'
\ No newline at end of file
<!-- Document Type :HTML-->
<!DOCTYPE html>
<!-- Start HTML, Language : English-United States-->
<html lang="en-us">
<!--Head: Contains meta info-->
<head>
<!-- Required meta tags -->
<!--Character Encoding : UTF-8 -->
<meta charset="UTF-8" />
<!-- Setting The Viewport for Responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Link to the external CSS file -->
<!-- <link rel="stylesheet" href="./css/style.css"> -->
<!--Title of the Website/Main page-->
<title>Code Quiz</title>
<!--End of Head-->
</head>
<!-- Bagin Body -->
<body>
<!-- Begin Header -->
<header>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="nav-link text-primary" id = "navhighscorelink" >High Scores</a>
<span class="ml-auto" id="timer"></span>
<!-- End Navigation bar -->
</nav>
<!-- End Header -->
</header>
<!-- Begin main -->
<main>
<br>
<br>
<!-- Begin container -->
<div class="container">
<!-- Begin card -->
<div class="card shadow rounded border-info">
<!-- Begin body -->
<div class="card-body">
<!-- card title -->
<h2 class="card-title mb-4 text-info text-center" id="title">Hornlogik Quiz Challenge</h2>
<hr class="line">
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10">
<div id="mainContent">
<h5 class="text-center">
Versuche die folgenden Fragen über Hornlogik im Zeitlimit richtig zu beantworten. Für jede falsche Antwort werden dir Zehn Sekunden abgezogen.
</h5>
<div class="text-center">
<button type="submit" id="startQuiz" class="btn bg-primary text-white rounded-pill mb-2">Start Quiz</button>
</div>
</div>
<div id = "quizContent"></div>
<div id = "score"></div>
<div id = "highscores"> </div>
</div>
</div>
<div id="answer">
<hr class="line">
</div>
</div>
</div>
</div>
<br>
<!-- End main -->
</main>
<!-- link to external javascript -->
<script src="./js/questions.js"></script>
<script src="./js/script.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- jQuery, javascript file for the Bootstrap's javascript file to function -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- Bootstrap Javascript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- End Body -->
</body>
</html>
// Questions as an array of Objects
var questions = [
{
title: "Wann ist eine Formel eine Hornformel?",
choices: ["Wenn sie in KNF ist und jede Klausel höchstens ein positives Literal enthält", "Wenn sie in DNF ist und jede Klausel höchstens ein positives Literal enthält", "Wenn jede Klausel höchstens ein positives Literal enthält", "Alle Formeln sind Hornformeln"],
answer: "Wenn sie in KNF ist und jede Klausel höchstens ein positives Literal enthält"
},
{
title: "Welche der folgenden Formeln ist eine Hornformel?",
choices: ["A ∧ ¬B", "(¬A ∨ ¬B) ∧ (A ∨ B)", "A ∨ B","Keine der Formeln"],
answer: "A ∧ ¬B"
},
{
title: "In welcher Laufzeit kann die Erfüllbarkeit einer Hornformel bestimmt werden?",
choices: ["In quadratischer Laufzeit", "In linearer Laufzeit", "In logarithmischer Laufzeit", "Joda nicht wissen"],
answer: "In quadratischer Laufzeit"
},
{
title: "Welche der folgenden Klauseltypen gehört nicht zu Hornklauseln?",
choices: ["Prozedurklauseln", "Tatsachenklauseln", "Zielklausel", "Temporalklauseln"],
answer: "Temporalklauseln"
},
{
title: "Bei welcher der folgenden Klauseln handelt es sich um einen Fakt?",
choices: ["T → D", "D → T", "D → ⊥", "⊥ → D"],
answer: "T → D"
},
{
title: "Stoppt man im Makierungsalgorithmus bei Schritt 2, so ist die Formel _____? Info: Schritt 2: Suche eine Klausel A1, . . . An →⊥, so dass alle A1, . . . , An markiert sind",
choices: ["Erfüllbar", "Unerfüllbar", "Allgemeingültig","Nichts"],
answer: "Unerfüllbar"
},
{
title: "Stoppt man im Makierungsalgorithmus bei Schritt 4, so ist die Formel _____? Info: Schritt 4: Stopp mit Ergebnis „erfüllbar“. (Modell: markierte Aussagenvariablen = Wahr, nichtmarkierte = Falsch)",
choices: ["Erfüllbar", "Unerfüllbar", "Allgemeingültig","Nichts"],
answer: "Erfüllbar"
},
];
\ No newline at end of file
var startButton = document.querySelector("#startQuiz"); //Main page start button
var timer = document.querySelector("#timer"); //Timer when quiz starts
var mainContent = document.querySelector("#mainContent"); //Start page content div
var questionEl = document.querySelector("#title"); //card title
var quizContent = document.querySelector("#quizContent"); //Question options div
var resultDiv = document.querySelector("#answer"); //Div for showing answer is correct/wrong
var scoreDiv = document.querySelector("#score"); //Div for Displying final scores when quiz completed
var highscoresDiv = document.querySelector("#highscores"); //Div for showing highscores
var navhighscorelink = document.querySelector("#navhighscorelink"); //highscore navigation link
var navlink = document.getElementById("navhighscorelink");
var secondsLeft = 180, questionIndex = 0,correct = 0 ;
var totalQuestions = questions.length;
var question , option1, option2, option3 ,option4 ,ans, previousScores;
var choiceArray = [], divArray = [];
//create buttons for choices
for(var i = 0 ; i < 4 ; i++){
var dv = document.createElement("div");
var ch = document.createElement("button");
ch.setAttribute("data-index",i);
ch.setAttribute("class","btn btn-primary rounded-pill mb-2");
choiceArray.push(ch);
divArray.push(dv);
}
//Create p for showing answer Correct/Wrong
var result = document.createElement("p");
result.setAttribute("class","text-muted font-italic");
resultDiv.appendChild(result);
//Start Quiz function
function startQuiz(){
startTimer();
buildQuestion();
}
//function to start timer when quiz starts
function startTimer(){
var timeInterval = setInterval(function(){
secondsLeft--;
timer.textContent = "Time : "+secondsLeft+ " sec";
if(secondsLeft <= 0 || (questionIndex > totalQuestions-1)){
resultDiv.style.display = "none";
quizContent.style.display = "none";
viewResult();
clearInterval(timeInterval);
timer.textContent = "";
}
},1000);
}
function buildQuestion(){
//hides start page content
questionEl.style.display= "none";
mainContent.style.display = "none";
quizContent.style.display= "none";
if(questionIndex > totalQuestions - 1){
return;
}
else{
ans = questions[questionIndex].answer;
//Display Question
questionEl.innerHTML = questions[questionIndex].title;
questionEl.setAttribute("class","text-left");
questionEl.style.display= "block";
for(var j = 0 ; j < 4 ; j++){
var index = choiceArray[j].getAttribute("data-index");
choiceArray[j].textContent = (+index+1) +". "+questions[questionIndex].choices[index];
divArray[j].appendChild(choiceArray[j]);
quizContent.appendChild(divArray[j]);
}
}
quizContent.style.display= "block"; // Display options
}
// Event Listener for options buttons
quizContent.addEventListener("click",function(event){
var element = event.target;
var userAnswer = element.textContent;
var userOption = userAnswer.substring(3, userAnswer.length);
if(userOption === ans){
correct++;
resultDiv.style.display = "block";
result.textContent = "Correct!"
setTimeout(function(){
result.textContent = "";
},500);
}
else {
secondsLeft -= 10;
result.textContent = "Wrong!"
setTimeout(function(){
result.textContent = "";
},500);
}
questionIndex++;
buildQuestion();
});
//Function to show score when quiz completes
function viewResult(){
questionEl.innerHTML = "Test Completed!";
questionEl.style.display= "block";
var s = document.createElement("p");
s.textContent = "Your final Score : "+correct;
scoreDiv.appendChild(s);
var form = document.createElement("form"); //Create form for storing highscore
var label = document.createElement("label"); //label
label.textContent = "Enter Name : ";
var text = document.createElement("input"); //textbox for inputting user name
text.setAttribute("id","nameInput");
text.setAttribute("class","ml-3");
var scoreButton = document.createElement("button"); //Submit User score
scoreButton.setAttribute("class","btn btn-primary rounded-pill mb-2 ml-3 mt-2");
scoreButton.textContent = "Submit";
form.appendChild(label);
form.appendChild(text);
form.appendChild(scoreButton);
scoreDiv.appendChild(form);
scoreButton.addEventListener("click",storeScores); //Submit button click event listener calls storeScores()
}
//Function to store highscores
function storeScores(event){
event.preventDefault();
var userName = document.querySelector("#nameInput").value.trim();
if(userName === null || userName === '') {
alert("Please enter user name");
return;
}
//Create user object for storing highscore
var user = {
name : userName,
score : correct
}
console.log(user);
previousScores = JSON.parse(localStorage.getItem("previousScores")); //get User highscores array in localStorage if exists
if(previousScores){
previousScores.push(user); //Push new user scores in array in localStorage
}
else{
previousScores = [user]; //If No user scores stored in localStorage, create array to store user object
}
// set new submission
localStorage.setItem("previousScores",JSON.stringify(previousScores));
showHighScores(); // Called function to display highscores
}
//function to show highscores
function showHighScores(){
questionEl.innerHTML = "Highscores";
questionEl.setAttribute("class","text-center text-info");
questionEl.style.display = "block";
quizContent.style.display = "none";
scoreDiv.style.display = "none";
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
tbl.setAttribute("id","table");
tbl.style.textAlign = "center";
var tblBody = document.createElement("tbody");
var row = document.createElement("tr");
var heading1 = document.createElement("th"); //table heading 1
var headingText1 = document.createTextNode("Name");
heading1.setAttribute("class","bg-info");
heading1.appendChild(headingText1);
row.appendChild(heading1);
var heading2 = document.createElement("th"); //table heading 2
var headingText2 = document.createTextNode("Score");
heading2.appendChild(headingText2);
heading2.setAttribute("class","bg-info");
row.appendChild(heading2);
tblBody.appendChild(row);
var userLength = 0;
if(previousScores) {
userLength = previousScores.length; //PreviousScores array length stored in localStorage
}
// creating all cells
for (var i = 0; i < userLength ; i++) {
// creates a table row
var row = document.createElement("tr");
var uname = previousScores[i].name;
var uscore = previousScores[i].score;
// Create a <td> element and a text node, make the textnode the contents of the <td>, and put the <td> at the end of the table row
var cell1 = document.createElement("td");
var cellText1 = document.createTextNode(uname);
cell1.appendChild(cellText1);
row.appendChild(cell1);
var cell2 = document.createElement("td");
var cellText2 = document.createTextNode(uscore);
cell2.appendChild(cellText2);
row.appendChild(cell2);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
if(userLength > 0){
tbl.appendChild(tblBody);
}
// appends <table> into <body>
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.setAttribute("width","100%");
highscoresDiv.appendChild(tbl);
var btnDiv = document.createElement("div");
btnDiv.style.textAlign = "center";
highscoresDiv.appendChild(btnDiv);
navlink.style.display = "none";
// Go Back button to go to start page
var goback = document.createElement("button");
goback.setAttribute("class","btn btn-primary rounded-pill mb-2 mt-4 ml-2");
goback.textContent = "Go Back";
btnDiv.appendChild(goback);
// Event listener for go back button opens index.html page
goback.addEventListener("click",function(){
window.location= "index.html";
});
// Clear Highscores button : clears localStorage
var clearscores = document.createElement("button");
clearscores.setAttribute("class","btn btn-primary rounded-pill mb-2 mt-4 ml-2");
clearscores.textContent = "Clear Highscores";
btnDiv.appendChild(clearscores);
// Event Listener for clear highscores button
clearscores.addEventListener("click",function(){
localStorage.clear();
var table = document.querySelector("#table");
table.style.display = "none";
});
}
// Navigation link 'Highscores' event listener
navhighscorelink.addEventListener("click",function(){
mainContent.style.display = "none";
navlink.style.display = "none";
previousScores = JSON.parse(localStorage.getItem("previousScores"));
showHighScores(); //Calls function to show highscores
});
//Start button event listener on start page which starts quiz
startButton.addEventListener("click",startQuiz);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment