-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (102 loc) · 5.46 KB
/
index.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voting Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
<h1 class="text-3xl font-bold mb-6">Vote</h1>
<div class="mb-6">
<h2 class="text-xl font-semibold mb-2">Instructions:</h2>
<ul class="list-disc pl-6">
<li>The interface consists of three sections: a level-2 president heading (containing the list of presidential candidates), a level-2 mess secretary heading (containing six lists of mess secretary candidates), and a Vote button. The interface can be navigated with tab and shift-tab, or the standard web navigation keys.</li>
<li>There are a total of two presidential candidates, and 11 mess-secretary candidates.</li>
<li>You must choose one out of two presidential candidates, and six out of eleven mess secretary candidates.</li>
<li>For each choice, you may choose "none of the above" if desired.</li>
<li>To avoid choosing a candidate twice, for mess secretary choices, once a candidate is chosen, it will disappear from the other lists.</li>
<li>After making your choices, press the Vote button, which will ask you to confirm your choices.</li>
<li>After confirmation, a new page will appear. Press the print button on this page.</li>
</ul>
</div>
<div class="mb-8">
<h2 class="text-2xl font-semibold mb-4">President</h2>
<select id="president" class="w-full p-2 border rounded" aria-label="Presidential Candidate">
<option value="">Select an option...</option>
<option value="Presidential candidate 1">Presidential Candidate 1</option>
<option value="Presidential Candidate 2">Presidential candidate 2</option>
<option value="None Of The Above">None Of The Above</option>
</select>
</div>
<div class="mb-8">
<h2 class="text-2xl font-semibold mb-4">Mess Secretary</h2>
<div id="messSecretaries"></div>
</div>
<button id="voteButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Vote
</button>
<script>
const messSecretaries = [
"ms candidate 1", "ms candidate 2", "ms candidate 3", "ms candidate 4", "ms candidate 5", "ms candidate 6", "ms candidate 7", "ms candidate 8", "ms candidate 9", "ms candidate 10", "ms candidate 11", "None Of The Above"
];
const messSecretariesDiv = document.getElementById('messSecretaries');
const voteButton = document.getElementById('voteButton');
function createMessSecretarySelect(index) {
const select = document.createElement('select');
select.id = `messSecretary${index}`;
select.setAttribute('aria-label', `Mess Secretary Candidate ${index + 1}`);
select.className = 'w-full p-2 border rounded mb-4';
select.innerHTML = '<option value="">Select an option...</option>';
messSecretaries.forEach(secretary => {
select.innerHTML += `<option value="${secretary}">${secretary}</option>`;
});
select.addEventListener('change', updateMessSecretaryOptions);
return select;
}
function updateMessSecretaryOptions() {
const selectedValues = Array.from(document.querySelectorAll('#messSecretaries select'))
.map(select => select.value)
.filter(value => value !== "" && value !== "None Of The Above");
document.querySelectorAll('#messSecretaries select').forEach(select => {
Array.from(select.options).forEach(option => {
if (option.value !== "") {
option.disabled = selectedValues.includes(option.value) && option.value !== select.value;
}
});
});
}
for (let i = 0; i < 6; i++) {
messSecretariesDiv.appendChild(createMessSecretarySelect(i));
}
function resetSelections() {
// Reset president selection
document.getElementById('president').value = "";
// Reset all mess secretary selections
document.querySelectorAll('#messSecretaries select').forEach(select => {
select.value = "";
});
// Update mess secretary options to enable all options
updateMessSecretaryOptions();
}
voteButton.addEventListener('click', () => {
const president = document.getElementById('president').value;
const messSecretariesSelected = Array.from(document.querySelectorAll('#messSecretaries select'))
.map(select => select.value)
if (president === "" || messSecretariesSelected.some(value => value === "")) {
alert("Please select a candidate from each list.");
return;
}
let message = `President: ${president || 'Not selected'}\n\nMess Secretaries:\n`;
messSecretariesSelected.forEach((secretary, index) => {
message += `${index + 1}. ${secretary}\n`;
});
const confirmed = confirm(message + "\nDo you want to confirm your vote?");
if (confirmed) {
window.print();
resetSelections();
}
});
</script>
</body>
</html>