forked from Puyodead1/udemy-downloader
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcoding_assignment_template.html
118 lines (109 loc) · 3.5 KB
/
coding_assignment_template.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
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Coding Assignment</title>
<style>
body {
font-family: sf pro text, -apple-system, BlinkMacSystemFont, Roboto,
segoe ui, Helvetica, Arial, sans-serif, apple color emoji,
segoe ui emoji, segoe ui symbol;
font-weight: 400;
line-height: 22.4px;
font-size: 16px;
}
p, ul, ol {
font-size: 16px;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
ul {
list-style: none;
margin: 0;
padding: 0;
max-width: none;
}
.code-snippet {
background-color: #fff;
border: 1px solid #d1d7dc;
color: #b4690e;
font-size: 90%;
padding: 0.2rem 0.4rem;
}
.code-block {
background-color: #fff;
color: #b4690e;
font-size: 90%;
}
.black-block {
color: #000000;
}
.italic-text {
font-style: italic;
}
</style>
</head>
<body onload="main()">
<h1 id="coding-title"></h1>
<div>
<h2>Instructions</h2>
<div id="coding-instructions"></div>
</div>
<div>
<h2>Test(s)</h2>
<div id="coding-tests"></div>
</div>
<div>
<h2>Solution(s)</h2>
<div id="coding-solutions"></div>
</div>
<script>
const quizData = __data_placeholder__;
function renderCodeList(rootElement, codeList, className, titlePrefix) {
for (var i = 0; i < codeList.length; i++) {
var elem = codeList[i];
var jsElem = document.createElement("div");
jsElem.className = className;
var jsElemTitle = document.createElement("h3");
jsElemTitle.innerHTML = titlePrefix + " " + (i + 1);
var jsElemBody = document.createElement("code");
jsElemBody.className = "code-block black-block";
jsElemBody.innerHTML = "<pre>" + elem.content + "</pre>";
jsElem.appendChild(jsElemTitle);
jsElem.appendChild(jsElemBody);
rootElement.appendChild(jsElem);
}
}
function main() {
// display the assignment
var codingTitle = document.getElementById("coding-title");
codingTitle.innerHTML = quizData.title;
var codingInstructions = document.getElementById("coding-instructions");
if (quizData.hasInstructions) {
codingInstructions.innerHTML = quizData.instructions;
} else {
codingInstructions.innerHTML = "<span class=\"italic-text\">" + quizData.instructions
+ "</span>";
}
// display the test(s)
var codingTests = document.getElementById("coding-tests");
if (!quizData.hasTests) {
codingTests.innerHTML = "<span class=\"italic-text\">" + quizData.tests + "</span>";
} else {
renderCodeList(codingTests, quizData.tests, "coding-test", "Test");
}
// display the solution(s)
var codingSolutions = document.getElementById("coding-solutions");
if (!quizData.hasSolutions) {
codingSolutions.innerHTML = "<span class=\"italic-text\">" + quizData.solutions + "</span>";
} else {
renderCodeList(codingSolutions, quizData.solutions, "coding-solution", "Solution");
}
}
</script>
</body>
</html>