---
layout: footer
js:
- boardgen.js
---
<div class="sidebyside">
    <div id="instructions">
        <h2>How To Use</h2>
        <p>You can use this website to generate bingo boards for almost any occasion. Select one of the pre-made board templates or create your own for tons of year-round fun!</p>
        <p>Some bingo game ideas include:</p>
        <ul>
            <li><strong>Movie Bingo</strong> - Gather around a movie with family or friends and see who gets to bingo first</li>
            <li><strong>Parade Bingo</strong> - Can you spot a unicyclist? a pooprt-scooper? a princess?</li>
            <li><strong>Road Trip Bingo</strong> - Personal fill-in-the-blank tiles allow you to fill in the places where a particular item was spotted</li>
            <li><strong>Camping Activity Bingo</strong> - Individual or group-based competition to see who can complete a "bingo" of camping activities</li>
        </ul>
    
    </div>
    <div>
        <h2>Generate Boards</h2>
        
        <div class="option">
            <label>Select Game Template: </label>
            <select id="gametype"></select>
        </div>

        <div class="option">
            <label>Number of Boards: </label>
            <span>
                <input id="boardcount" type="number" value="1" />
            </span>
        </div>

        <div class="option">
            <label>Board Size: </label>
            <span>
                <input id="boarddimx" type="number" min="2" max="5" value="5" />
                x 
                <input id="boarddimy" type="number" min="2" max="5" value="5" />
            </span>
        </div>

        <div class="option">
            <label>Free Spaces: </label>
            <span>
                <input id="freetiles" type="number" min="0" value="0" />
            </span>
        </div>

        <div class="option">
            <p id="warningText"></p>
            <button id="generate">Generate</button>
            <button id="play">Play Now</button>
        </div>


    </div>
</div>


<div id="pdfinline"></div>