220 lines
5.5 KiB
HTML
220 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Bingo Card Maker</title>
|
|||
|
|
<style>
|
|||
|
|
#bingo-cards table {
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%
|
|||
|
|
table-layout: fixed;
|
|||
|
|
}
|
|||
|
|
#bingo-cards td {
|
|||
|
|
border: 2px solid black;
|
|||
|
|
height: 1in;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16pt;
|
|||
|
|
}
|
|||
|
|
#bingo-cards h1 {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
#words-input {
|
|||
|
|
height: 30em;
|
|||
|
|
width: 20em;
|
|||
|
|
}
|
|||
|
|
#title-input {
|
|||
|
|
width: 20em;
|
|||
|
|
}
|
|||
|
|
.pagesep {
|
|||
|
|
color: gray;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media screen {
|
|||
|
|
.noshow {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media print {
|
|||
|
|
#bingo-controls {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
#bingo-cards .pagesep {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
#bingo-cards .bingo-card {
|
|||
|
|
page-break-after: always;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function showError(msg) {
|
|||
|
|
window.alert(msg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function shuffle(arr) {
|
|||
|
|
// Returns a random int n where 0 ≤ n < max
|
|||
|
|
function randomInt(max) {
|
|||
|
|
return Math.floor(Math.random() * max);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
for (var i = arr.length - 1; i > 0; i--) {
|
|||
|
|
var randi = randomInt(i+1);
|
|||
|
|
var tmp = arr[i];
|
|||
|
|
arr[i] = arr[randi];
|
|||
|
|
arr[randi] = tmp;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function makeCard(title, words, includeFree, freeText) {
|
|||
|
|
var width = 5;
|
|||
|
|
var height = 5;
|
|||
|
|
var freeIndex = 12;
|
|||
|
|
|
|||
|
|
var card = document.createElement("div");
|
|||
|
|
card.className = "bingo-card";
|
|||
|
|
card.innerHTML += "<div class='pagesep'>PAGE BREAK</div>";
|
|||
|
|
card.innerHTML += "<h1>" + title + "</h1>";
|
|||
|
|
|
|||
|
|
var table = document.createElement("table");
|
|||
|
|
|
|||
|
|
var row;
|
|||
|
|
for (var i=0; i < width * height; i++) {
|
|||
|
|
if (i % width === 0) {
|
|||
|
|
row = document.createElement("tr");
|
|||
|
|
table.appendChild(row);
|
|||
|
|
}
|
|||
|
|
var cell = document.createElement("td");
|
|||
|
|
cell.style.width = (100 / width) + "%";
|
|||
|
|
if (includeFree) {
|
|||
|
|
if (i === freeIndex) {
|
|||
|
|
cell.innerText = freeText;
|
|||
|
|
} else if (i < freeIndex) {
|
|||
|
|
cell.innerText = words[i];
|
|||
|
|
} else {
|
|||
|
|
cell.innerText = words[i - 1];
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
cell.innerText = words[i];
|
|||
|
|
}
|
|||
|
|
row.appendChild(cell);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
card.appendChild(table);
|
|||
|
|
|
|||
|
|
return card;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|||
|
|
var titleInput = document.getElementById("title-input");
|
|||
|
|
var wordsInput = document.getElementById("words-input");
|
|||
|
|
var freeInput = document.getElementById("free-input");
|
|||
|
|
var freeTextInput = document.getElementById("free-text-input");
|
|||
|
|
var numberInput = document.getElementById("number-input");
|
|||
|
|
var showInput = document.getElementById("show-input");
|
|||
|
|
var createButton = document.getElementById("create-button");
|
|||
|
|
var cards = document.getElementById("bingo-cards");
|
|||
|
|
|
|||
|
|
function updateShowCards() {
|
|||
|
|
if (showInput.checked) {
|
|||
|
|
cards.classList.remove("noshow");
|
|||
|
|
} else {
|
|||
|
|
cards.classList.add("noshow");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateShowCards();
|
|||
|
|
|
|||
|
|
createButton.addEventListener("click", function() {
|
|||
|
|
var wordsNeeded = 25;
|
|||
|
|
if (freeInput.checked) {
|
|||
|
|
wordsNeeded--;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Validate free space text input
|
|||
|
|
if (freeInput.checked && freeTextInput.value === "") {
|
|||
|
|
showError("No free space text given");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Validate words input
|
|||
|
|
var words = wordsInput.value.split("\n");
|
|||
|
|
for (var i=0; i < words.length; i++) {
|
|||
|
|
words[i] = words[i].trim();
|
|||
|
|
}
|
|||
|
|
words = words.filter(function(s) {
|
|||
|
|
return s != "";
|
|||
|
|
});
|
|||
|
|
console.log(words.length)
|
|||
|
|
if (words.length < wordsNeeded) {
|
|||
|
|
showError("Not enough words");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//Validate # of cards input
|
|||
|
|
if (!numberInput.checkValidity() || isNaN(numberInput.valueAsNumber)) {
|
|||
|
|
showError("Invalid number of cards");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
cards.innerHTML = "";
|
|||
|
|
for (var i=0; i < numberInput.valueAsNumber; i++) {
|
|||
|
|
shuffle(words);
|
|||
|
|
var card = makeCard(titleInput.value, words, freeInput.checked, freeTextInput.value);
|
|||
|
|
cards.appendChild(card);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.print();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
freeInput.addEventListener("change", function() {
|
|||
|
|
freeTextInput.disabled = !freeInput.checked;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
showInput.addEventListener("change", updateShowCards);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="bingo-controls">
|
|||
|
|
<h1>Bingo Card Maker</h1>
|
|||
|
|
<p>
|
|||
|
|
By Brandon Dyck<br>
|
|||
|
|
Distributed under the terms of the <a href="https://opensource.org/licenses/BSD-3-Clause" target="_blank">3-clause BSD license</a>.
|
|||
|
|
<p>
|
|||
|
|
<label for="title-input">Title:</label><br>
|
|||
|
|
<input id="title-input"></input>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<label for="words-input">Words:<br>(one per line; at least 24 w/ free space, or 25 otherwise)</label><br>
|
|||
|
|
<textarea id="words-input"></textarea>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<input type="checkbox" id="free-input"></input>
|
|||
|
|
<label for="free-input">Include free space</label>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<label for="free-text-input">Free space text:</label>
|
|||
|
|
<input type="text" id="free-text-input" value="FREE" disabled></input>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<label for="number-input"># of cards (1–100):</label>
|
|||
|
|
<input type="number" min="1" max="100" value="1" id="number-input">
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<input type="checkbox" id="show-input"></input>
|
|||
|
|
<label for="show-input">Show cards</label>
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
<button id="create-button">Create & Print</button>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="bingo-cards"></div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|