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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
<!DOCTYPE html>
<html lang="en">
<head>
<?php include 'inc/headlinks.php'; ?>
</head>
<body class="bodyBg">
<div class="questionHeader">
<p class="h1 title">課程A(CSK23001)</p>
<div class="courseprogressWrap">
<div class="courseprogress">
<div class="bar"></div>
</div>
<p class="courseprogressText">題目進度1/10</p>
</div>
</div>
<section class="bodyWrap">
<div class="w-100">
<div class="wrap indexWrap">
<div class="main">
<div class="paperWrap">
<div class="videoWrap">
<video width="100%" class="video" height="100%" playsinline style="pointer-events: none;"
poster="../assets/images/video.png?v1232156">
<source src="../assets/video/ques-01.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="progress">
<span class="timeline"></span>
</div>
</div>
<div class="videoControl">
<div>
<button class="videoBtn btn"><i class="fas fa-play-circle"></i> 播放</button>
<button class="replayBtn btn hide"><i class="fas fa-undo"></i> 重播</button>
</div>
<p class="text-danger small">**請先按播放看完影片,再作答題目!**</p>
</div>
</div>
<div class="titleWrap mb-1 flex-column">
<p class="h5 tips greenFont"><i class="fas fa-exclamation-circle"></i> 題目會在影片完結後出現</p>
<div class="questionContent">
<div class="questionContentWrap">
<div class="questionWrap">
<p class="mb-4 bold">下列那個不是正確使用梯具?</p>
<div class="choiceSelect">
<input type="radio" id="q1" name="question1" value="1">
<label for="q1">
使用清潔梯具
</div>
<div class="choiceSelect">
<input type="radio" id="q2" name="question1" value="2">
<label for="q2">
使用乾爽梯具
</label>
</div>
<div class="choiceSelect">
<input type="radio" id="q3" name="question1" value="3">
<label for="q3">
未乾酒漆梯具
</label>
</div>
</div>
<div class="btnControl question mt-auto">
<div class="text-danger mb-2"><span class="errMessage"></span></div>
<button class="fancy-button bg-gradient1 submitBtn"><span>下一題</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="../assets/js/custom.js"></script>
<script>
const bar = document.querySelector(".bar");
$(function() {
bar.style.setProperty("--progress", "10%");
$(".title").text("課程題目01");
$(video).on('ended', function() {
isPlaying = false;
toggleBtn.html(`<i class="fas fa-play-circle"></i> 播放`);
console.log('The video has ended.');
$(".questionContent").fadeIn();
$(".replayBtn").removeClass("hide");
$('.tips').hide();
// Call a function or execute code here
});
});
$(".submitBtn").click(function() {
var selectedValue = $('input[name=question1]:checked').val();
console.log(selectedValue);
if (selectedValue == undefined) {
$(".errMessage").show().text("**請作答題目");
} else if (selectedValue != 3) {
$(".errMessage").show().text("**答案錯誤! 請再次作答");
} else {
window.location.href = 'success.php';
}
});
</script>
</body>
</html>
|