diff --git a/docs/config/config.js b/docs/config/config.js new file mode 100644 index 0000000..1ea8607 --- /dev/null +++ b/docs/config/config.js @@ -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}`); + }, + }, +}); \ No newline at end of file diff --git a/docs/config/index.html b/docs/config/index.html new file mode 100644 index 0000000..8e8059e --- /dev/null +++ b/docs/config/index.html @@ -0,0 +1,89 @@ + + + + + + + Twitch Quiz Config Generator + + + + + + +
+

Twitch Quizzer Quiz Config Creator

+

Made by: Oliver Akins

+

+ 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. +

+
+
+
+

Options

+
+ + Question {{ i + 1 }}: + +
+ + +
+ +

+ Users will be able to pick any letter between A + and whatever letter you pick. Guess outside of this + letter range will not be counted as their guess. +

+ +
+ + +
+ +
+
+ +
+
+
{{ config_preview }}
+
+
+ + \ No newline at end of file diff --git a/docs/styles.css b/docs/styles.css new file mode 100644 index 0000000..c16ed4c --- /dev/null +++ b/docs/styles.css @@ -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; + } +} \ No newline at end of file