Twitch/quizzer
0
0
Fork 0
Code Issues Pull requests Activity

Add a quiz editing page

Browse source
This commit is contained in:
Oliver Akins 2022-01-19 23:37:27 -06:00
parent dd6e4ef0de
commit 9320fae179
No known key found for this signature in database
GPG key ID: 3C2014AF9457AF99
3 changed files with 188 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

47
docs/config/config.js Normal file
View 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
View 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>