go
/
survey-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Basic data laid out and UIs faked.

Browse Source
master
Zed A. Shaw 1 day ago
parent 29d3775f8c
commit b6c294c5bd
5 changed files with 162 additions and 59 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      TODO.txt
  2. 4
      pages/index.html
  3. 70
      views/survey/index.html
  4. 71
      views/survey/results.html
  5. 73
      views/survey/submit.html

3
TODO.txt
Unescape View File

@ -1,3 +0,0 @@
* The qmgr needs to actually manage the queue, currently it's just a little testing tool.
* Probably also need an email testing tool that can send sample emails off the cli.
* Try to remove code.js and either bring the functionality to jzed.js or not use it.

4
pages/index.html
Unescape View File

@ -14,7 +14,7 @@
</middle> </middle>
<bottom> <bottom>
<button-group> <button-group>
<button type="button"><a href="/survey/">Take Survey</a></button> <a href="/survey/"><button type="button">Take Survey</button></a>
</button-group> </button-group>
</bottom> </bottom>
</card> </card>
@ -33,7 +33,7 @@
<bottom> <bottom>
<button-group> <button-group>
<button type="button"><a href="/survey/results">View Results</a></button> <a href="/survey/results"><button type="button">View Results</button></a>
</button-group> </button-group>
</bottom> </bottom>
</card> </card>

70
views/survey/index.html
Unescape View File

@ -1,30 +1,64 @@
<h1>Sample Survey</h1> <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?"
},
]
};
<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> $boot(async () => {
const items = Survey.Questions;
const list = $id('question-list');
const tmpl = $id('question-row');
<form> for(let i in items) {
<grid style="font-size: 1.1em; grid-template-columns: 1fr 60px; gap: 10px;"> $append(list, $render(tmpl, {i, item: items[i]}));
<label for="q1">Question 1: Do you like HTML?</label> }
<input id="q1" type="checkbox" /> });
<label for="q2">Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</label> const resetForm = () => {
<input id="q2" type="checkbox" /> $id('survey-form').reset();
}
</script>
<label for="q3">Question 1: Do you like HTML?</label> <style>
<input id="q3" type="checkbox" /> #question-list {
font-size: 1.1em;
grid-template-columns: 1fr 60px;
gap: 10px;
}
</style>
<label for="q4">Question 1: Do you like HTML?</label> <h1>Sample Survey</h1>
<input id="q4" type="checkbox" />
<label for="q5">Question 1: Do you like HTML?</label> <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>
<input id="q5" type="checkbox" />
<label for="q6">Question 1: Do you like HTML?</label> <form id="survey-form" action="/survey/submit">
<input id="q6" type="checkbox" /> <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> </grid>
<button-group> <button-group>
<button type="button">Reset</button> <button type="button" onClick="resetForm()">Reset</button>
<button type="button"><a href="/survey/submit">Submit</a></button> <button type="submit">Submit</button>
</button-group> </button-group>
</form> </form>

71
views/survey/results.html
Unescape View File

@ -1,3 +1,51 @@
<script>
const Survey = {
"Title": "Sample Survey",
"Description": "The description.",
"Questions": [
{
"Id": 1,
"Question": "Do you like HTML?",
"Result": 20
},
{
"Id": 2,
"Question": "Do you like CSS?",
"Result": 33
},
{
"Id": 3,
"Question": "Do you like JavaScript?",
"Result": 48
},
{
"Id": 4,
"Question": "Are you a programmer?",
"Result": 2
},
]
};
$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]}));
}
});
</script>
<style>
#question-list {
font-size: 1.1em;
grid-template-columns: 1fr 60px;
gap: 10px;
}
</style>
<h1>Results of Survey "Sample Finished Survey"</h1> <h1>Results of Survey "Sample Finished Survey"</h1>
<block> <block>
@ -10,24 +58,11 @@
<h2>Questions</h2> <h2>Questions</h2>
<grid style="font-size: 1.1em; grid-template-columns: 1fr 60px; gap: 10px;"> <grid id="question-list">
<label for="q1">Question 1: Do you like HTML?</label> <template id="question-row">
<span>50%</span> <label for="${item.Id}">${item.Question}</label>
<span>${item.Result}%</span>
<label for="q2">Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</label> </template>
<span>50%</span>
<label for="q3">Question 1: Do you like HTML?</label>
<span>50%</span>
<label for="q4">Question 1: Do you like HTML?</label>
<span>50%</span>
<label for="q5">Question 1: Do you like HTML?</label>
<span>50%</span>
<label for="q6">Question 1: Do you like HTML?</label>
<span>50%</span>
</grid> </grid>
<a href="/">View More Surveys</a> <a href="/">View More Surveys</a>

73
views/survey/submit.html
Unescape View File

@ -1,28 +1,65 @@
<h1>Verify Your Answers</h1> <script>
const Survey = {
<p>Please verify your answers are what you would like to say on this survey.</p> "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
},
]
};
<grid style="font-size: 1.1em; grid-template-columns: 1fr 60px; gap: 10px;"> $boot(async () => {
<label for="q1">Question 1: Do you like HTML?</label> const items = Survey.Questions;
<span>YES</span> const list = $id('question-list');
const tmpl = $id('question-row');
<label for="q2">Tilde tacos mlkshk bell hooks. Selvage deep v jawn, akerman breathwork direct trade etsy blackbird spyplane danish modern woke.</label> for(let i in items) {
<span>YES</span> const question = items[i];
question.Result = question.Answer ? "YES" : "NO";
$append(list, $render(tmpl, {i, item: question}));
}
});
</script>
<label for="q3">Question 1: Do you like HTML?</label> <style>
<span>YES</span> #question-list {
font-size: 1.1em;
grid-template-columns: 1fr 60px;
gap: 10px;
}
</style>
<label for="q4">Question 1: Do you like HTML?</label> <h1>Verify Your Answers</h1>
<span>NO</span>
<label for="q5">Question 1: Do you like HTML?</label> <p>Please verify your answers are what you would like to say on this survey.</p>
<span>YES</span>
<label for="q6">Question 1: Do you like HTML?</label> <grid id="question-list">
<span>YES</span> <template id="question-row">
<label for="${item.Id}">${item.Question}</label>
<span>${item.Result}</span>
</template>
</grid> </grid>
<button-group> <button-group>
<button type="button"><a href="/survey/">Change My Answers</a></button> <a href="/survey/"><button type="button">Change My Answers</button></a>
<button type="button"><a href="/survey/finalize">Submit My Answers</a></button> <a href="/survey/finalize"><button type="button">Submit My Answers</button></a>
</button-group> </button-group>

Write Preview
Loading…
Cancel
Save