-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
103 lines (97 loc) · 3.12 KB
/
script.js
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
const message = document.querySelector('.message');
const game = {};
const output = document.querySelector('.que');
const nx = document.querySelector('.next');
nx.addEventListener('click',createQuestion);
const url = 'https://script.google.com/macros/s/AKfycbzY6vnGOT3AqpxcF7EELfWuH1gSmkYpznfZzCLEEjdTPlhEe-U/exec';
fetch(url).then(function(res){
return res.json();
}).then(function(data){
game.total = data.data.length;
game.val = 0;
game.score = 0;
game.arr = data.data;
createQuestion();
})
function createQuestion(){
nx.style.display = "none";
if(game.val+1 > game.total){
message.textContent = 'あなたのスコアは '+game.score+' / '+game.total+' !';
if(game.score >= 6){
output.style.color = "green";
output.textContent = "あなたは立派なバンド経験者です!";
nx.textContent = 'もう一度回答する';
nx.style.display = 'block';
nx.style.backgroundColor = "green";
}else{
output.style.color = "red";
output.textContent = "あなたはバンド経験者ではないようです…";
nx.textContent = '再挑戦する';
nx.style.display = 'block';
nx.style.backgroundColor = "red";
}
message.classList.add('score');
output.classList.add('end');
nx.addEventListener('click',function(){
window.location.reload();
})
}else{
message.textContent = 'クイズ '+game.total+' 問中 '+(game.val+1)+' 問目';
output.innerHTML = '';
let q = game.arr[game.val];
const main = document.createElement('div');
main.textContent = q.question;
main.classList.add("question");
output.appendChild(main);
arrayRandom(q.opt);
q.opt.forEach(function(el){
let span = document.createElement('span');
span.textContent = el;
span.classList.add('answer');
span.classList.add('btn');
output.appendChild(span);
span.ans = q.answer;
span.addEventListener('click',checker);
});
};
}
function arrayRandom(arr){
arr.sort(function(){
return .5 - Math.random();
});
};
function checker(e){
const selAns = document.querySelectorAll('.answer');
selAns.forEach(function(ele){
ele.classList.remove('answer');
ele.style.color = "gray";
ele.style.cursor = 'not-allowed';
ele.removeEventListener('click',checker);
})
let sel = e.target;
if(game.val+1 >= game.total){
if(sel.textContent == sel.ans){
sel.style.color = "green"
nx.textContent = '正解! - クリックしてスコアを確認する';
game.score++;
nx.style.backgroundColor = "green";
}else{
sel.style.color = "red"
nx.textContent = '不正解 - クリックしてスコアを確認する';
nx.style.backgroundColor = "red";
};
}else{
if(sel.textContent == sel.ans){
sel.style.color = "green"
nx.textContent = '正解! - クリックして次の問題へ';
game.score++;
nx.style.backgroundColor = "green";
}else{
sel.style.color = "red"
nx.textContent = '不正解 - クリックして次の問題へ';
nx.style.backgroundColor = "red";
};
}
game.val++;
nx.style.display = "block";
}