30 juil.
2024 à 20:46
Questionnaire
<!DOCTYPE html>
<html>
<head>
<title>Jouez et gagnez un voyage !</title>
<link href ="[Link]" rel ="stylesheet">
<script src = "[Link]"></script>
</head>
<body>
<h1>Notre agence vous offre l'opportunité de
gagner le tour du monde ! </h1>
<form id = "quiz" name = "quiz">
<p class = "questions">Quel est la capitale de
l'Island? </p>
<input id = "textbox" type = "text" name =
"question1">
<p class = "questions">Quelle est la capitale de
l'Autriche? </p>
<input type = "radio" id = "mc" name = "question2"
value = "Vienne"> Vienne <br>
<input type = "radio" id = "mc" name = "question2"
value = "Alger"> Alger <br>
<p class = "questions">Quelle est la capitale du
Côte d'Ivoire?</p>
<input type = "radio" id = "mc" name = "question3"
value = "Albany"> Abidjan<br>
<input type = "radio" id = "mc" name = "question3"
value = "All Benny's"> Bamako<br>
<input id = "button" type = "button" value =
"Validez!" onclick = "check();">
</form>
<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
<img id = "picture">
</div>
</html>
</body>
body {
font-family: 'Arial', sans-serif;
}
#quiz {
margin-left: 10px;
background: #18f2e0;
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;
display: block;
margin: auto;
}
#button:hover {
background: white;
border: 1px solid green;
color: black;
cursor: pointer;
}
#after_submit {
visibility: hidden;
background: #e83cdc;
padding: 10px 20px 10px 20px;
height: 370px;
width: 400px;
border-radius: 20px;
float: left;
margin-left: 20px;
font-size: 30px;
}
#picture {
width: 395px;
height: 170px;
}
#mc {
display: inline;
}
Javascript
function check(){
var question1 = [Link];
var question2 = [Link];
var question3 = [Link];
var correct = 0;
if (question1 == "Reykjavik") {
correct++;
}
if (question2 == "Vienne") {
correct++;
}
if (question3 == "Abidjan") {
correct++;
}
var pictures = ["img/[Link]", "img/[Link]",
"img/[Link]"];
var messages = ["Bravo!", "Pas mal !", "Vous
pouvez faire mieux!"];
var score;
if (correct < 1) {
range = 2;
}
if (correct > 0 && correct < 3) {
range = 1;
}
if (correct == 3) {
range = 0;
}
[Link]("after_submit").style.v
isibility = "visible";
[Link]("message").innerHTM
L = messages[score];
[Link]("number_correct").inn
erHTML = "Vous avez eu " + correct + " correct.";
[Link]("picture").src =
pictures[range];
}