-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
252 lines (238 loc) · 7.53 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Corporate Bingo Card For Teams or Zoom Calls</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style type="text/css">
body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Times New Roman", Verdana, Arial, Helvetica, sans-serif;
}
h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 28px;
}
table {
border-collapse: collapse;
}
th {
color:white;
background:grey;
height:40px;
font-family:Arial,Helvetica;
font-size:24px;
border: 2px #666 solid;
text-align: center;
border-style: solid;
}
#BigTable td{
border-style: none;
}
#BingoCardTable td {
background-color:white;
width:150px;
height:150px;
border: 2px #666 solid;
text-align: center;
}
.dabberMark {
background-repeat: no-repeat;
}
.collapsibleHeader {
background-color: #777;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.collapsibleActive, .collapsibleHeader:hover {
background-color: #555;
}
.collapsibleHeader:after {
content: '\002B'; // Plus
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.collapsibleActive:after {
content: "\2212"; // Minus
}
.collapsibleContent {
padding: 0 18px;
max-height: 0;
font-family:Arial,Helvetica;
font-size:15px;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.showSource {
font-family:Arial,Helvetica;
font-size:12px;
text-align: right;
align:right;
}
</style>
<script type="text/javascript">
window.onload = InitAll;
const myArray = [
"Expedite", //Planning related
"Mitigate",
"Escalation",
"Urgent Request",
"Defer",
"Re-plan",
"Shift Right",
"Prioritization",
"Lessons Learned", // Post Mortem
"Root Cause",
"I need to drop soon", // Scheduling (People)
"Working on weekend",
"(s)he is on Hold",
"Sorry I joined late",
"I cannot see the screen", //Connection Issues
"Can you hear me?",
"Can you repeat that ?",
"I was speaking on mute",
"Your voice is breaking",
"There is a connection issue",
"Please mute yourself",
"Let us take this offline", //Follow up later
"Please setup a call",
"Create a slide",
"Please follow up",
"At risk", //Status
"Not ready",
"Not aligned",
"This is Red now",
"Miscommunication", // Misc
"On-Off switch",
"No support from other team",
"Awaiting Confirmation"
];
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
var DabberMark = {
// Toggle the Dabber Mark on a Bingo Card Cell
toggleDabberMark: function(e) {
var target = e.currentTarget;
if (target.classList.contains("dabberMark")) {
target.classList.remove("dabberMark");
target.style.backgroundImage = null;
} else {
target.classList.add("dabberMark");
target.style.backgroundPosition = Math.floor(Math.random() * 50 + 10)+"px " + Math.floor(Math.random() * 50 + 10)+ "px";
target.style.backgroundImage = "url('images/dabberMarkColor"+ Math.floor(Math.random() * 5 + 1) + ".png')";
}
},
// On all bingo card cells, attach listener for mouse/touch events which will toggle the Dabber Mark
init: function() {
var bingoCardCells = document.getElementById("myBingoCard").getElementsByTagName("td");
for (bingoCardCell of bingoCardCells) {
bingoCardCell.addEventListener("mousedown", this.toggleDabberMark);
}
}
};
function genrNewBingoCard() {
// Delete the old Bingo Card
$("#myBingoCard").html("");
output = '<table border="0" ><thead><tr><th colspan=5> Corporate Bingo </th></tr></thead>';
output += '<tbody id="BingoCardTable">';
//Make new 5x5 Bingo Card
const randomizedArray = shuffleArray(myArray);
for (i = 0; i < 5; i += 1) {
output += '<tr>';
for (j = 0; j < 5; j += 1) {
output += '<td>' + randomizedArray[i * 5 + j] + '</td>';
}
output += '</tr>';
}
output += "</tbody></table>";
$("#myBingoCard").append(output);
DabberMark.init();
};
function collapsibleInit() {
var coll = document.getElementsByClassName("collapsibleHeader");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("collapsibleActive");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
};
function checkIfBingo() {
/**
Algorithm
1. On Click, check if any row,col or diagonal is fully marked.
- Iterate 5 steps using these tuples {start cell, step count}
- Columns {1,5},{2,5},{3,5},{4,5},{5,5}
- Rows {1,1},{6,1},{11,1},{16,1},{21,1}
- Diagonals {1,6},{5,4}
- If any unmarked cell is found, skip to next tuple
- If any traversal is finds 5 marked items, then announce BINGO.
- Keep tag of identified bingos so there are no dumplicate bingos
- Keep array of {BingoFound} with 12 boolean values to keep track
2. On refresh, reset the BingoFound markers.
**/
}
function InitAll() {
genrNewBingoCard();
DabberMark.init();
collapsibleInit();
};
</script>
</head>
<body>
<h1>Bingo for your Zoom or Teams Call</h1>
<table style="width:100%" id="BigTable">
<tr>
<td style="width:80%">
<div id="myBingoCard"></div>
</td>
<td valign="bottom">
<button class="collapsibleHeader">Instructions</button>
<div class="collapsibleContent">
<p>
<ol>
<li>Listen carefully to what people say in the Call & mark the phrases you hear, by clicking on them.</li>
<li>In case you did a mistake, you can undo selection, by clicking the cell again</li>
<li>If you get to mark all cells of a row, or of a column or of a diagonal, shout <b>BINGO</b></li>
<li>Continue playing to see if you can mark other row/column/diagonal.</li>
<li>You can <a id="myLink" href="#" onclick="genrNewBingoCard();return false;">click here</a> to generate a new Bingo Card.</li>
</ol>
</p>
</div>
<button class="collapsibleHeader">Must Read</button>
<div class="collapsibleContent">
<p>
Remember that not everyone in the call, would share your sense of humor or appreciate you having fun playing Corporate Bingo.<br><br>
Hence, play this <b>discreetly at your own risk</b>.
</p>
</div>
<div class="showSource">
<a href="https://github.com/arun-ks/CorporateBingo">Source</a>
</div>
</td>
</tr>
</table>
</body>
</html>