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.
64 lines
1.7 KiB
64 lines
1.7 KiB
<script>
|
|
const Survey = {
|
|
"Title": "Sample Survey",
|
|
"Description": "The description.",
|
|
"Questions": [
|
|
{
|
|
"Id": 1,
|
|
"Question": "Do you like HTML?"
|
|
},
|
|
{
|
|
"Id": 2,
|
|
"Question": "Do you like CSS?"
|
|
},
|
|
{
|
|
"Id": 3,
|
|
"Question": "Do you like JavaScript?"
|
|
},
|
|
{
|
|
"Id": 4,
|
|
"Question": "Are you a programmer?"
|
|
},
|
|
]
|
|
};
|
|
|
|
$boot(async () => {
|
|
const items = Survey.Questions;
|
|
const list = $id('question-list');
|
|
const tmpl = $id('question-row');
|
|
|
|
for(let i in items) {
|
|
$append(list, $render(tmpl, {i, item: items[i]}));
|
|
}
|
|
});
|
|
|
|
const resetForm = () => {
|
|
$id('survey-form').reset();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#question-list {
|
|
font-size: 1.1em;
|
|
grid-template-columns: 1fr 60px;
|
|
gap: 10px;
|
|
}
|
|
</style>
|
|
|
|
<h1>Sample Survey</h1>
|
|
|
|
<p>Solarpunk moka pot ceramics jean shorts. Cold-pressed fashion axe normcore four tet bandcamp ascot dad shoes bitters try-hard. Brooklyn slugging marxism XOXO gorpcore granny square humblebrag live-edge, fitzcarraldo mercury retrograde sound bath kickstarter van life freegan. Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</p>
|
|
|
|
<form id="survey-form" action="/survey/submit">
|
|
<grid id="question-list">
|
|
<template id="question-row">
|
|
<label for="question-${item.Id}">${item.Question}</label>
|
|
<input id="question-${item.Id}" type="checkbox" />
|
|
</template>
|
|
</grid>
|
|
|
|
<button-group>
|
|
<button type="button" onClick="resetForm()">Reset</button>
|
|
<button type="submit">Submit</button>
|
|
</button-group>
|
|
</form>
|
|
|