added quiz_java to use implementing javascrpit to quiz the user of website after every reading

git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@115 a672b425-5310-4d7a-af5c-997e18724b81
This commit is contained in:
annoum 2018-11-12 07:49:57 +00:00
parent 35d3e9e458
commit 2254673d2b
3 changed files with 159 additions and 0 deletions

View File

@ -0,0 +1,74 @@
body {
font-family: 'Lato', sans-serif;
}
#quiz {
margin-left: 10px;
background: #d2def2;
padding: 10px 20px 10px 20px;
width: 400px;
border-radius: 20px;
float: left;
}
input {
margin-bottom: 20px;
display: block;
}
#textbox {
height: 25px;
font-size: 16px;
border-radius: 5px;
border: none;
padding-left: 5px;
}
#button {
background: green;
border: none;
border-radius: 5px;
padding: 10px;
color: white;
font-size: 16px;
transition-duration: .5s;
margin-top: 15px;
}
#button:hover {
background: white;
border: 1px solid green;
color: black;
cursor: pointer;
}
#after_submit {
visibility: hidden;
background: #ff5459;
padding: 10px 20px 10px 20px;
width: 400px;
border-radius: 20px;
float: left;
margin-left: 20px;
font-size: 30px;
}
#picture {
width: 375px;
height: 245px;
}
#mc {
display: inline;
}

View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title> SA group-1 </title>
<link href ="style.css" rel ="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src = "main.js"></script>
</head>
<body>
<h1>Are you ready for the quiz?</h1>
<form id = "quiz" name = "quiz">
<p class = "questions">Which of the two groups are better?</p>
<input id = "textbox" type = "text" name = "question1">
<p class = "questions">What is unix?</p>
<input type = "radio" id = "mc" name = "question2" value = "A dog"> A dog<br>
<input type = "radio" id = "mc" name = "question2" value = "A type of.."> A type of..<br>
<p class = "questions">What is absolute path?</p>
<input type = "radio" id = "mc" name = "question3" value = "A type of.."> A type of..<br>
<input type = "radio" id = "mc" name = "question3" value = "A Dog"> A dog<br>
<br><br><input id = "button" type = "button" value = "Finish? Sure!?" onclick = "check();">
</form>
<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
<img id = "picture">
</div>
</html>
</body>

View File

@ -0,0 +1,40 @@
function check(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
if (question1 == "group1") {
correct++;
}
if (question2 == "A type of..") {
correct++;
}
if (question3 == "A type of..") {
correct++;
}
var pictures = ["img/win.gif", "img/meh.jpeg", "img/lose.gif"];
var messages = ["Great job!", "That's just okay", "You really need to do better"];
var score;
if (correct == 0) {
score = 2;
}
if (correct > 0 && correct < 3) {
score = 1;
}
if (correct == 3) {
score = 0;
}
document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = messages[score];
document.getElementById("number_correct").innerHTML = "You got " + correct + " correct.";
document.getElementById("picture").src = pictures[score];
}