119 lines
3.5 KiB
HTML
119 lines
3.5 KiB
HTML
<!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>
|