You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.4 KiB
65 lines
1.4 KiB
<script>
|
|
const Survey = {
|
|
"Title": "Sample Survey",
|
|
"Description": "The description.",
|
|
"Questions": [
|
|
{
|
|
"Id": 1,
|
|
"Question": "Do you like HTML?",
|
|
"Answer": true,
|
|
},
|
|
{
|
|
"Id": 2,
|
|
"Question": "Do you like CSS?",
|
|
"Answer": true
|
|
},
|
|
{
|
|
"Id": 3,
|
|
"Question": "Do you like JavaScript?",
|
|
"Answer": true
|
|
},
|
|
{
|
|
"Id": 4,
|
|
"Question": "Are you a programmer?",
|
|
"Answer": true
|
|
},
|
|
]
|
|
};
|
|
|
|
$boot(async () => {
|
|
const items = Survey.Questions;
|
|
const list = $id('question-list');
|
|
const tmpl = $id('question-row');
|
|
|
|
for(let i in items) {
|
|
const question = items[i];
|
|
question.Result = question.Answer ? "YES" : "NO";
|
|
$append(list, $render(tmpl, {i, item: question}));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#question-list {
|
|
font-size: 1.1em;
|
|
grid-template-columns: 1fr 60px;
|
|
gap: 10px;
|
|
}
|
|
</style>
|
|
|
|
<h1>Verify Your Answers</h1>
|
|
|
|
<p>Please verify your answers are what you would like to say on this survey.</p>
|
|
|
|
<grid id="question-list">
|
|
<template id="question-row">
|
|
<label for="${item.Id}">${item.Question}</label>
|
|
<span>${item.Result}</span>
|
|
</template>
|
|
</grid>
|
|
|
|
<button-group>
|
|
<a href="/survey/"><button type="button">Change My Answers</button></a>
|
|
<a href="/survey/finalize"><button type="button">Submit My Answers</button></a>
|
|
</button-group>
|
|
|
|
|