Add a quiz editing page
This commit is contained in:
Oliver Akins
parent
dd6e4ef0de
commit
9320fae179
3 changed files with 188 additions and 0 deletions
47
docs/config/config.js
Normal file
47
docs/config/config.js
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
var app = new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
|
||||
quiz: []
|
||||
},
|
||||
computed: {
|
||||
config_preview() {
|
||||
let data = [];
|
||||
for (var i in this.quiz) {
|
||||
let question = this.quiz[i];
|
||||
|
||||
if (!this.verify_question_options(question)) {
|
||||
data.push(`# ERROR: Question ${parseInt(i) + 1} has an invalid option.\n#\tThe question has been excluded from the quiz,\n#\tthis can cause your questions not to line up\n#\twith the answers!`);
|
||||
continue;
|
||||
};
|
||||
|
||||
|
||||
// Valid options, create the actual TOML structure
|
||||
let section = `[[quiz.questions]] # question ${parseInt(i) + 1}`;
|
||||
section += `\nanswer="${question.answer.toUpperCase()}"`;
|
||||
if (question.highest_letter == "A") {
|
||||
section += `\nrange="[A]"`;
|
||||
} else {
|
||||
section += `\nrange="[A-${question.highest_letter}]"`
|
||||
};
|
||||
section += `\ncan_change=${question.changeable}`;
|
||||
|
||||
data.push(section);
|
||||
}
|
||||
return data.join(`\n\n`);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
verify_question_options(question) {
|
||||
return question.answer.length === 1;
|
||||
},
|
||||
add_question() {
|
||||
this.quiz.push(JSON.parse(`{"answer": "A", "highest_letter": "A", "changeable": false}`));
|
||||
},
|
||||
delete_question(i) {
|
||||
document.getElementById(`question-${i}-options`).open = false;
|
||||
this.quiz.splice(i, 1);
|
||||
alert(`Deleted Question ${parseInt(i) + 1}`);
|
||||
},
|
||||
},
|
||||
});
|
||||
89
docs/config/index.html
Normal file
89
docs/config/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!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>Twitch Quiz Config Generator</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
||||
<script src="./config.js" defer></script>
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
</head>
|
||||
<body class="full-width">
|
||||
<div class="center">
|
||||
<h1>Twitch Quizzer Quiz Config Creator</h1>
|
||||
<p>Made by: Oliver Akins</p>
|
||||
<p>
|
||||
This is to help aid in the process of creating a quiz, the displayed
|
||||
config data can be used within the bot's configuration in order to
|
||||
have the quiz registered in the bot after a restart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="options">
|
||||
<h2 class="center">Options</h2>
|
||||
<details
|
||||
class="question"
|
||||
v-for="question, i in quiz"
|
||||
:key="i"
|
||||
:id="`question-${i}-options`"
|
||||
>
|
||||
<summary
|
||||
>
|
||||
Question {{ i + 1 }}:
|
||||
</summary>
|
||||
<div>
|
||||
<label for="answer">Answer: (Single letter)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="answer"
|
||||
v-model="question.answer"
|
||||
>
|
||||
<hr>
|
||||
<label for="allowed-answers">Highest Letter:</label>
|
||||
<p>
|
||||
Users will be able to pick any letter between <code>A</code>
|
||||
and whatever letter you pick. Guess outside of this
|
||||
letter range will not be counted as their guess.
|
||||
</p>
|
||||
<select
|
||||
name="allowed answers"
|
||||
id="allowed-answers"
|
||||
v-model="question.highest_letter"
|
||||
>
|
||||
<option
|
||||
v-for="letter in alphabet"
|
||||
:value="letter"
|
||||
>
|
||||
{{ letter }}
|
||||
</option>
|
||||
</select>
|
||||
<hr>
|
||||
<label for="change-answer">Users can Change Their Answer:</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="change answer"
|
||||
id="change-answer"
|
||||
v-model="question.changeable"
|
||||
>
|
||||
<br>
|
||||
<button
|
||||
@click.stop="delete_question(i)"
|
||||
>
|
||||
Delete Question
|
||||
</button>
|
||||
</div>
|
||||
</details>
|
||||
<button
|
||||
@click.stop="add_question()"
|
||||
>
|
||||
Add Question
|
||||
</button>
|
||||
</div>
|
||||
<div class="preview">
|
||||
<pre><code lang="toml">{{ config_preview }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
52
docs/styles.css
Normal file
52
docs/styles.css
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
max-width: unset;
|
||||
width: 90vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#app > div {
|
||||
flex-grow: 1;
|
||||
min-width: 350px;
|
||||
max-width: 50%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.options {
|
||||
background: #1a242f;
|
||||
border-radius: 7px;
|
||||
padding: 5px 7px;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.options > details[open] {
|
||||
background: #1e2f3d;
|
||||
border-radius: 5px;
|
||||
margin: 5px;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
|
||||
h2, h3, h4 {
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.preview {}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#app > div {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.options {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue