1
0
mirror of https://github.com/andre-wojtowicz/elearning-ims-cp-template.git synced 2024-11-26 16:15:28 +01:00
elearning-ims-cp-template/materials/quiz.html

167 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Quiz</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="css/quiz.css" rel="stylesheet" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<!--[if !IE]> -->
<script src="js/jquery.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/sh/shCore.js"></script>
<script type="text/javascript" src="js/sh/shBrushCpp.js"></script>
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<script src="js/quiz.js"></script>
</head>
<body>
<script type="text/javascript">
var answers = [
["A"],
["A", "C"],
["B"]
],
tot = answers.length;
</script>
<div class="container-fluid">
<ol>
<li class="question-element">
<div id="question-1">
<strong>First question</strong>
<span id="result-1"></span>
<ul>
<li>
<input type="radio" name="answer-1" id="1-A" />
<label for="1-A">
OK
</label>
</li>
<li>
<input type="radio" name="answer-1" id="1-B" />
<label for="1-B">
wrong
</label>
</li>
<li>
<input type="radio" name="answer-1" id="1-C" />
<label for="1-C">
wrong with<br/>image test:<br/>
<img src="img/cat_reasonably_small.jpg" alt="cat reasonably small" />
</label>
</li>
<li>
<input type="radio" name="answer-1" id="1-D" />
<label for="1-D">
wrong
</label>
</li>
</ul>
</div>
</li>
<li class="question-element">
<div id="question-2">
<strong>Second multi-answer question</strong>
<span id="result-2"></span>
<ul>
<li>
<input type="checkbox" name="answer-2" id="2-A" />
<label for="2-A">
OK
</label>
</li>
<li>
<input type="checkbox" name="answer-2" id="2-B" />
<label for="2-B">
wrong
</label>
</li>
<li>
<input type="checkbox" name="answer-2" id="2-C" />
<label for="2-C">
OK
</label>
</li>
<li>
<input type="checkbox" name="answer-2" id="2-D" />
<label for="2-D">
wrong
</label>
</li>
</ul>
</div>
</li>
<li class="question-element">
<div id="question-3">
<strong>Third question</strong>
<span id="result-3"></span>
<ul>
<li>
<input type="radio" name="answer-3" id="3-A" />
<label for="3-A">
wrong
</label>
</li>
<li>
<input type="radio" name="answer-3" id="3-B" />
<label for="3-B">
OK
</label>
</li>
<li>
<input type="radio" name="answer-3" id="3-C" />
<label for="3-C">
wrong with code:
</label>
<label for="3-C">
<pre class="brush: cpp; highlight: [3, 9]">#include &lt;iostream&gt;
int main(int argc, char *argv[]) {
/* An annoying "Hello World" example */
for (auto i = 0; i &lt; 0xFFFF; i++)
cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
char c = '\n';
unordered_map &lt;string, vector&lt;string&gt; &gt; m;
m["key"] = "\\\\"; // this is an error
return -2e3 + 12l;
</pre>
</label>
</li>
<li>
<input type="radio" name="answer-3" id="3-D" />
<label for="3-D">
wrong
</label>
</li>
</ul>
</div>
</li>
</ol>
<div>
<button type="button" class="btn btn-primary" onclick="returnScore()">Check</button>
<span id="result-msg" class="result-msg lead" hidden>
Result: <span id="result-score"></span>
</span>
<div class="progress custom-progress" id="progress">
<div class="progress-bar progress-bar-success" id="progress-ok" style="width: 0%"></div>
<div class="progress-bar progress-bar-danger" id="progress-wrong" style="width: 0%"></div>
</div>
</div>
</div>
<script>SyntaxHighlighter.all();</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>