89 lines
No EOL
2.2 KiB
HTML
89 lines
No EOL
2.2 KiB
HTML
<!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> |