-
Notifications
You must be signed in to change notification settings - Fork 3
/
help.html
76 lines (75 loc) · 7.11 KB
/
help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<html lang="en" class="theme-dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voter - the TWOW voting helper</title>
<link rel="stylesheet" href="reset.min.css" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/svg" href="icon.svg" />
</head>
<body>
<nav>
<div class="left">
<p id="logo">Voter</p>
<p id="subtitle">a <a href="https://figgyc.uk">figgyc</a> creation</p>
</div>
<div class="right">
<div id="buttons-cluster">
<a href="index.html">
<div class="">
<button id="back">Back</button>
</div>
</a>
</div>
</div>
</nav>
<div id="content-area">
<div class="step">
<h1>Video tutorial</h1>
<p>
Coming soon!
</p>
<h1>Get started</h1>
<p>
Voter is a tool designed mainly to help you vote on TWOW "megascreens" quickly and easily.
It works by sorting a list on simple "which is better?" comparisons. That way, you don't have
to keep the whole list in your brain when sorting.
For a bonus speedup, you can also use Voter's "tier list" function to split the response list into sub-lists based on quality.
It's faster to sort many small lists than one big list, due to complicated maths reasons. (Although for some list sizes, the added time to actually make the tier lists can outweigh the benefits.)
</p>
<p>
In summary:
<ol>
<li>From the Google Sheet, copy the megascreen columns. Include the letter <strong>and</strong> the responses. (If you don't have a sheet you can also enter these manually into the box.)</li>
<li>Type the voting keyword into the keyword box.</li>
<li>Type or copy/paste any letters which represent your response into the "Your responses" box. If you have two or more responses, separate each letter with a comma.</li>
<li>If you want to do tier listing, select a set of tiers to use in the "Tier listing mode" setting.</li>
<li>Click Go!</li>
<li>Start tier listing and comparing responses. It can take a while, which is why Voter does auto saving and also allows you to make manual saves. (Access these with the "Load" button at the top of the page.)</li>
<li>At the end, you'll end up with a vote which looks like this: <pre>[SOMETHING AEBDC]</pre> DM this to the host of your TWOW!</li>
</ol>
</p>
<h1>Advanced usage</h1>
<p>
<ul>
<li><strong>Tier listing mode</strong>: This provides a shortcut where you place responses into groups, like the cliche tier list image. Once the grouping is complete you only have to vote <em>within</em> each group. (Technically speaking, if you have groups A on top and B below, you're basically saying "every response in group A is better than every response in group B", so the voting screen will skip comparisons between groups.) You can move a response into or between groups by dragging it, or by tapping it and then tapping the appropriate group button. Note that the order within each tier does not matter.</li>
<li><strong>Theme</strong>: Makes the colors different. The Classic theme resembles the original Voter.js, if you dislike graphic design or like pure black screens (I hear it's good for OLED displays).</li>
<li><strong>Sorting algorithm</strong>: I recommend the Merge sort algorithm because it should show responses you've voted on recently near each other if possible, which should make them easier to remember. The Legacy sort algorithm uses your browser's built in sorting algorithm like the original Voter.js. </li>
<li><strong>TWOW mode</strong>: Leave this on if you're voting on a TWOW. Basically this enables the functionality where the first part of each line (before the first space or tab) is a symbol. This voting symbol is then used to assemble a finished vote which can be copied out of Voter and given to a host of the TWOW to process. If you disable this, you could use Voter to sort arbitrary lists of text without it eating the first word, which could be useful, but you won't get a "bracket vote" at the end.</li>
<li><strong>Show word count</strong>: Shows a best guess estimate of a word count. The definition of a "word" is difficult and the word count I use is a bit naive, so if you're voting against something because Voter says it has too many words, please double check first. One thing you could do is if the spreadsheet you're importing from has a manual human-verified word count, then you could copy that column in too and disable this option. (At some point I might add an option for Voter to show those in small text like the current automatic word count, but that's not a thing yet.)</li>
<li><strong>Smart colors</strong>: This will colour the buttons in the voting screen such that responses which you've previously voted positively on will appear green, responses voted negatively will appear red, and responses voted equally for each (or not voted on yet) will appear yellow (or some colour in between).</li>
<li><strong>Only drag with handles</strong>: On the tier list screen and review screen, Voter features drag and drop lists to let you rearrange responses. On a computer it's nice to drag the text of the responses so you don't have to move your mouse to the small drag handles. But on a phone this will prevent you from scrolling the screen by touching and swiping, so this option makes it so you can only move drag and drop lists by using the handles.</li>
<li><strong>Import/export</strong>: This page is fairly self explanatory - it lets you import and export your in-progress voting between different devices.</li>
<li><strong>Keyboard shortcuts</strong>: If you're voting on a computer you can use the keyboard to be quicker. In the voting screen, press 1 to vote for the top response and 2 for the bottom. In the tier list screen you can also use the number keys to select the tiers, where 1 is the top tier, 2 is the second tier and so on. (0 will add to the 10th tier).</li>
<li><strong>Votelink</strong>:
If you host a TWOW, you can create a link that automatically sends your voters to a particular screen. The format is as follows: <br />
<pre><code>https://voter.figgyc.uk/#votelink3=keyword%0Aprompt%0Avotescreen</code></pre> <br />
where votescreen is the (URL encoded) content of the Responses box, and same for the keyword box and prompt/notes box. To generate the votescreen string, use one line for each response, where the voting letter/symbol and response are separated by a tab or space. If you use Google Sheets, see <a href="https://docs.google.com/spreadsheets/d/1dfbluK2b23qivuPQ3LTxHAeYBH2cqOiCgJJtSxbHb0g">this Sheet</a> for an example formula. You might find it useful to make a copy of the sheet in the File menu at the top.
</li>
</ul>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js" async></script>
<script src="voter.js" async defer></script>
</body>
</html>