-
Notifications
You must be signed in to change notification settings - Fork 2
/
listAnswers.html
126 lines (104 loc) · 4.2 KB
/
listAnswers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Quiz Basi </title>
<script src="load-mathjax.js" async></script>
</head>
<body>
<style>
.table-edit {
border-color: #b3b3b3!important;
}
.responsive-img {
max-width: 100%;
height: auto;
}
.quiz_container {
width:70%;
margin: auto;
max-width:800px;
margin-bottom: 3em;
}
@media screen and (max-width: 516px) {
.quiz_container{
width: 95%;
margin: auto;
max-width:800px;
margin-bottom: 3em;
}
}
</style>
<div class="container" style="margin-top: 1em">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="index.html">Quiz</a>
</li>
<li class="nav-item">
<a class="nav-link" href="listQuestions.html">Tutte le Domande</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="listAnswers.html">Tutte le Risposte</a>
</li>
</ul>
</div>
<h3 style="text-align:center; margin-top:2em">Tutte le risposte di: </br>Basi di Dati</h3>
<div style="text-align:center; margin-top:1em">
<button type='button' id='submit' class='btn btn-primary' onclick="window.print()">Stampa</button>
<button class="btn btn-primary" id="btn-back-to-top" style="width:30px; height:30px;text-align:center;position: fixed;bottom: 20px;right: 20px;display: none;border-radius: 50%;padding: 0!important;text-align: center;">
<i class="fa fa-arrow-up" style="font-size:17px;color:white;"></i>
</button>
</div>
<div class='quiz_container' id="quiz"></div>
<div id="ris"></div>
<script>
let mybutton = document.getElementById("btn-back-to-top")
window.onscroll = function () {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
mybutton.addEventListener("click",()=> {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
})
quiz = document.getElementById("quiz")
fetch("answers.json").then(res=>res.json()).then(data=>{
let n=0
data.forEach(element=>{
n++
let radios=""
Object.keys(element.answers).forEach(e=>{
let correct = (e==element.correctAnswer)? " ✔":""
let answer = (e==element.correctAnswer)? "<b>"+element.answers[e]+"</b>":element.answers[e]
radios+="<ul>"+
"<li id='"+(n+e)+"'>"+answer+correct+"</li>"+
"</ul>"
})
quiz.innerHTML+="<div class='card text-center shadow-sm' style='margin-top:2em'>"+
"<div class='card-header'>Domanda "+n+"</div>"+
"<div class='card-body'>"+
"<h6 class='card-title' style='margin-bottom: 1.8em; line-height:2em'>"+element.question+"</h6>"+
"<div class='card-text' style='text-align:left'>"+radios+"</div>"+
"</div>"+
"<div class='card-footer text-muted'>Categoria: "+element.category+"</div>"
})
})
</script>
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
</ul>
<p class="text-center text-muted">© 2023 Bisca e Rick</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>