-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
144 lines (130 loc) · 6.01 KB
/
test.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script src="/static/js/jquery-3.5.1.min.js"></script>
<script src="/static/js/bootstrap.min.js">
</script>
<style>
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
</style>
</head>
<body style="min-height:100vh;font-family: 'Nanum Gothic',serif;">
<a class="btn btn-light d-flex flex-row align-items-center" id="title" disabled="disabled">
<div class="bg-light rounded text-hide position-absolute">
<img draggable="false"/>
</div>
<h1 class="d-flex justify-content-center container-fluid">
</h1>
</a>
<div class="d-flex flex-column justify-content-center container-sm">
<div class="form-group mt-5" id="testform">
<div id="result" class="alert alert-primary d-none" role="alert">
<h4 class="alert-heading">채점이 끝났습니다!</h4>
<p class="m-2"> 틀린 문제는 힌트를 통해 다시 풀 수 있으니 참고하시면 좋겠습니다.
<br>점수가 85점 미만이라면 재학습 후 다시 시험을 치루시길 바랍니다.
</p>
<hr class="m-2">
<p id="result-score" class="mb-0"> 100점</p>
</div>
</div>
</div>
</body>
<script>
var test_data = undefined;
function shuffleArray(array) {
let curId = array.length;
while (0 !== curId) {
let randId = Math.floor(Math.random() * curId);
curId -= 1
let tmp = array[curId];
array[curId] = array[randId];
array[randId] = tmp;
}
return array;
}
function score() {
let k = 0;
let score = 0;
for (const question of test_data.questions) {
k += 1;
let correct = false;
const input = $(`#quest_${k}_answer`);
if (['single-line', 'multi-line'].indexOf(question.answer_type) != -1) {
if (input[0].value.match(RegExp(question.answer)) !== null) correct = true;
} else if (question.answer_type === 'radio') {
let value = null;
for (const child of input.find('.form-check-input')) {
if (child.checked) {
value = child.title;
break;
}
}
if (value === question.answer) correct = true;
} else console.log(question);
if (!correct) {
input.addClass('border-danger');
input.removeClass('border-success');
$(`#quest_${k}_help`).removeClass('invisible');
} else {
input.addClass('border-success');
input.removeClass('border-danger');
$(`#quest_${k}_help`).addClass('invisible');
score += 100.0 / (test_data.questions.length);
}
}
$('#result').removeClass('d-none');
$('#result-score').text(` ${Math.floor(score * 100) / 100}점`);
$("html, body").animate({scrollTop: 0}, 100);
}
function exit() {
window.location.href = '/index.html';
}
async function setup() {
const urlParams = new URLSearchParams(window.location.search);
const test = urlParams.get('test');
const result = await fetch(`/tests/${test}.json`);
if (result.status !== 200) {
alert('유효하지 않은 주소입니다.');
window.location.href = '/index.html';
return;
}
test_data = await result.json();
const title_data = (await (await fetch(`/titles.json`)).json()).find(data => data.link === test);
let form = $('#testform');
$('#title').attr({'href': title_data.cheatsheet});
$('#title>div>img').attr({'src': `/static/image/${title_data.image}`});
$('#title>h1').text(title_data.name);
let k = 0;
for (const question of test_data.questions) {
k += 1;
form.append(`<div class="d-flex flex-wrap align-items-end"><h5>${k}번 문제.</h5><h6>${question.title}</h6></div>`);
if (question.type === "text") {
if (question.desc !== null) form.append(`<div class="alert alert-secondary" role="alert">${question.desc}</div>`)
} else if (question.type === "html") {
form.append(`<div class="border rounded-lg mb-3">${question.html}</div>`)
}
if (question.answer_type === "single-line") {
form.append(`<input id="quest_${k}_answer" class="shadow form-control" type="text">`)
} else if (question.answer_type === "multi-line") {
form.append(`<textarea id="quest_${k}_answer" class="shadow form-control" rows="3"></textarea>`)
} else if (question.answer_type === "radio") {
let choices = question.not_answers;
choices.push(question.answer);
const check_form = $(`<div class="form-check" id="quest_${k}_answer">`);
for (const choice of shuffleArray(choices)) {
check_form.append(`<div class="form-check">
<input class="form-check-input" type="radio" name="quest_${k}_answer_radio" title="${choice}">
<label class="form-check-label"> ${choice} </label>
</div>`);
}
form.append(check_form);
}
form.append(`<small id = "quest_${k}_help" class= "text-danger form-text invisible mb-2" >${question.hint}</small>`);
}
form.append($('<button type="submit" id="submit" class="btn btn-primary border border-dark">채점</button>').bind('click', score));
form.append($('<button id="exit" class="btn btn-light ml-3 border border-dark">돌아가기</button>').bind('click', exit));
}
setup();
</script>
</html>