Skip to main content

Digital Blue Card





<!DOCTYPE html>
<html>
<head>
    <title>Digital Blue Card</title>
    <script>
        // Function to set the current date and time
        function setCurrentDateTime() {
            var now = new Date();
            var currentDate = now.toISOString().substr(0, 10);
            var currentTime = now.toISOString().substr(11, 5);
            document.getElementById("date").value = currentDate;
            document.getElementById("time").value = currentTime;
        }

        // Function to show/hide duration input field based on selected consequence
        function showDurationField() {
            var consequenceSelect = document.getElementById("consequence");
            var durationField = document.getElementById("durationField");

            if (consequenceSelect.value === "chair-time-out" ||
                consequenceSelect.value === "RTO" ||
                consequenceSelect.value === "restraint" ||
                consequenceSelect.value === "separation") {
                durationField.style.display = "block";
            } else {
                durationField.style.display = "none";
            }
        }
    </script>
</head>
<body onload="setCurrentDateTime()">
    <h1>Digital Blue Card</h1>
    <form>
        <label for="name">Student Name:</label>
        <input type="text" id="name" name="name">
        
        <label for="grade">Grade:</label>
        <select id="grade" name="grade">
            <option value="first">First</option>
            <option value="second">Second</option>
            <option value="third">Third</option>
            <option value="fourth">Fourth</option>
            <option value="fifth">Fifth</option>
            <option value="sixth">Sixth</option>
            <option value="seventh">Seventh</option>
            <option value="eighth">Eighth</option>
            <option value="highschool">Highschool</option>
        </select><br><br>
        
        <label for="staff">Teacher Name:</label>
        <input type="text" id="staff" name="staff">
        
        <label for="time">Time:</label>
        <input type="time" id="time" name="time"><br><br>

        <label for="date">Date:</label>
        <input type="date" id="date" name="date"><br><br>

        <label for="behavior">Behavior (Select multiple):</label>
        <select id="behavior" name="behavior" multiple>
            <option value="noncompliance">Noncompliance</option>
            <option value="verbal-defiance">Verbal Defiance</option>
            <option value="tantrum">Tantrum</option>
            <option value="property-destruction">Property Destruction</option>
            <option value="physical-aggression">Physical Aggression</option>
            <option value="elopement">Elopement</option>
            <option value="SIB">SIB (Self-Injurious Behavior)</option>
        </select><br><br>

        <label for="activity">Activity:</label>
        <select id="activity" name="activity">
            <option value="asked-to-do-something">Asked to do something</option>
            <option value="bothered-by-peer">Bothered by peer</option>
            <option value="could-not-get-desired-item">Could not get desired item/activity</option>
            <option value="activity-interrupted">Activity interrupted</option>
            <option value="low-no-activity">Low/No activity</option>
            <option value="attention-from-staff">Attention from staff</option>
        </select>
        
        <label for="possibly-function">Possibly Function (Select multiple):</label>
        <select id="possibly-function" name="possibly-function" multiple>
            <option value="get-staff-attention">Get Staff Attention</option>
            <option value="get-peer-attention">Get Peer Attention</option>
            <option value="remove-attention">Remove Attention</option>
            <option value="get-object-activity">Get Object/Activity</option>
            <option value="self-stimulation">Self-Stimulation</option>
            <option value="avoid-activity-demand">Avoid Activity/Demand</option>
            <option value="other">Other</option>
        </select><br><br>
        
        <label for="location">Location:</label>
        <select id="location" name="location">
            <option value="bathroom">Bathroom</option>
            <option value="classroom">Classroom</option>
            <option value="hallway">Hallway</option>
            <option value="music">Music</option>
            <option value="gym">Gym</option>
            <option value="art">Art</option>
            <option value="bus-loading-zone">Bus Loading Zone</option>
        </select><br><br>

        <label for="consequence">Consequence (Select multiple):</label>
        <select id="consequence" name="consequence" onchange="showDurationField()" multiple>
            <option value="verbal-redirect">Verbal Redirect</option>
            <option value="ignored">Ignored</option>
            <option value="provided-attention">Provided Attention</option>
            <option value="blocked">Blocked</option>
            <option value="chair-time-out">Chair Time-Out</option>
            <option value="RTO">RTO</option>
            <option value="separation">Separation</option>
            <option value="restraint">Restraint</option>
        </select><br><br>

        <div id="durationField" style="display: none;">
            <label for="duration">Duration (minutes):</label>
            <input type="number" id="duration" name="duration" min="1"><br><br>
        </div>

        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

        <input type="submit" value="Submit">
    </form>
</body>
</html>

Best Behavior Game

<!DOCTYPE html>
<html>
<head>
    <title>The Great Behavior Game</title>
    <style>
        /* Your existing CSS styles here */
        .avatar {
            display: block;
            margin: 0 auto;
            max-width: 100px;
            height: auto;
        }
        .countdownOverlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        .countdownText {
            font-size: 18px;
            color: white;
        }
        .countdown {
            position: relative;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid #ccc;
            animation: countdown-animation 2.25s linear infinite;
        }
        @keyframes countdown-animation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(240deg);
            }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h1>The Great Behavior Game</h1>

<div>
    <!-- Start Game, Pause Duration, and VI options -->
    <label for="viSelect">Select VI Schedule:</label>
    <select id="viSelect">
        <option value="1">VI1</option>
        <option value="3">VI3</option>
        <option value="5">VI5</option>
    </select>
    <label for="durationSelect">Pause Duration:</label>
    <select id="durationSelect">
        <option value="60">1 Minute</option>
        <option value="180">3 Minutes</option>
        <option value="300">5 Minutes</option>
    </select>
    <button id="startAllButton">Start Game for All</button>
</div>

<!-- Add an input field to add names to the list -->
<label for="nameInput">Add Name:</label>
<input type="text" id="nameInput">
<button id="addNameButton">Add Name</button>

<!-- Display the list of names -->
<h2>Names:</h2>
<ul id="nameList"></ul>

<!-- Display points, timer, pause, and bonus buttons for each name -->
<div id="timerSection" style="display: none;">
    <h2>Timers:</h2>
    <ul id="timerList"></ul>
</div>

<!-- Display pause timestamps for each name -->
<h2>Pause Timestamps:</h2>
<ul id="pauseTimestampList"></ul>

<!-- Display points bar graph -->
<h2>Points Bar Graph:</h2>
<canvas id="pointsChart" width="400" height="200"></canvas>

<!-- Display pause events scatterplot graph -->
<h2>Pause Events Scatterplot:</h2>
<canvas id="pauseEventsScatterplot" width="400" height="200"></canvas>

<div class="countdownOverlay" id="countdownOverlay">
    <div class="countdown">
        <div class="countdownText" id="countdownText">0</div>
    </div>
</div>

<audio id="pointSound" src="path/to/your/sound.mp3" autoplay></audio>

<script>
    const nameList = []; // Array to store name data
    const timerData = []; // Array to store timer data

    function addNameToList(name) {
        nameList.push(name);
        updateNameList();
    }

    function updateNameList() {
        const nameListElement = document.getElementById("nameList");
        nameListElement.innerHTML = "";
        for (let i = 0; i < nameList.length; i++) {
            const listItem = document.createElement("li");
            listItem.textContent = nameList[i];
            nameListElement.appendChild(listItem);
        }
        updateNameSelect();
    }

    function updateNameSelect() {
        const selectNameElement = document.getElementById("selectName");
        selectNameElement.innerHTML = "";
        for (let i = 0; i < nameList.length; i++) {
            const option = document.createElement("option");
            option.value = i;
            option.textContent = nameList[i];
            selectNameElement.appendChild(option);
        }
    }

    function startGameForAll() {
        const selectedVI = parseInt(document.getElementById("viSelect").value);
        const viInterval = selectedVI * 60; // Convert to seconds
        
        for (let i = 0; i < nameList.length; i++) {
            startGame(i, viInterval);
        }
        document.getElementById("timerSection").style.display = "block";
    }

    function startGame(index, viInterval) {
        const timerBar = document.createElement("div");
        timerBar.className = "timerBar";
        timerBar.innerHTML = `<div id="timerFill_${index}" class="timerFill"></div>`;

        const pauseButton = document.createElement("button");
        pauseButton.textContent = "Pause";
        pauseButton.addEventListener("click", () => {
            togglePause(index);
        });

        const bonusPointButton = document.createElement("button");
        bonusPointButton.textContent = "Bonus Point";
        bonusPointButton.addEventListener("click", () => {
            addBonusPoint(index);
        });

        const listItem = document.createElement("li");
        listItem.textContent = `${nameList[index]}: 0 points`;
        listItem.appendChild(timerBar);
        listItem.appendChild(pauseButton);
        listItem.appendChild(bonusPointButton);

        const avatarImage = document.createElement("img");
        avatarImage.src = `path/to/avatars/${nameList[index].toLowerCase()}-avatar.jpg`; // Update the path and file name
        avatarImage.className = "avatar";

        const timestampList = document.createElement("ul");

        listItem.appendChild(avatarImage);
        listItem.appendChild(timestampList);

        const timerListElement = document.getElementById("timerList");
        timerListElement.appendChild(listItem);

        const currentTime = new Date();
        timerData[index] = {
            points: 0,
            isPaused: false,
            pausedDuration: 0,
            selectedDuration: parseInt(document.getElementById("durationSelect").value),
            viInterval: viInterval,
            startTime: currentTime,
            timestamps: []
        };

        const intervalId = setInterval(() => {
            updatePointsAndTimer(index);
        }, viInterval * 1000);

        timerData[index].intervalId = intervalId;
    }

    function updatePointsAndTimer(index) {
        const currentTime = new Date();
        const elapsedTime = (currentTime - timerData[index].startTime) / 1000;

        if (!timerData[index].isPaused) {
            timerData[index].points++;
        }

        if (timerData[index].isPaused) {
            timerData[index].pausedDuration += elapsedTime;
        }

        const timeLeft = timerData[index].selectedDuration - elapsedTime;
        updateVisualTimer(index, timeLeft);
        updateTimerList(); // Update the information for all names

        timerData[index].startTime = currentTime;
    }

    function updateVisualTimer(index, timeLeft) {
        const timerFill = document.getElementById(`timerFill_${index}`);
        const timerWidth = (timeLeft / timerData[index].selectedDuration) * 100;
        timerFill.style.width = timerWidth + "%";
    }

    function togglePause(index) {
        timerData[index].isPaused = !timerData[index].isPaused;

        const countdownOverlay = document.getElementById("countdownOverlay");
        const countdownText = document.getElementById("countdownText");
        countdownText.textContent = timerData[index].selectedDuration;

        if (timerData[index].isPaused) {
            countdownOverlay.style.display = "flex";
            updateCountdown(index);
        } else {
            countdownOverlay.style.display = "none";
        }

        // Add timestamp for pause
        const pauseTimestamp = new Date().toLocaleString();
        timerData[index].timestamps.push({
            type: "Pause",
            timestamp: pauseTimestamp
        });

        updatePauseTimestampList(); // Update the pause timestamps list
    }

    function updateCountdown(index) {
        const countdownText = document.getElementById("countdownText");
        let remainingTime = timerData[index].selectedDuration;
        countdownText.textContent = remainingTime;

        const countdownInterval = setInterval(() => {
            remainingTime--;
            countdownText.textContent = remainingTime;

            if (remainingTime === 0) {
                clearInterval(countdownInterval);
                document.getElementById("countdownOverlay").style.display = "none";
            }
        }, 1500); // 2/3 slower than 1 second
    }

    function addBonusPoint(index) {
        timerData[index].points++;
        updateTimerList();

        // Play the point sound
        const pointSound = document.getElementById("pointSound");
        pointSound.currentTime = 0; // Reset the audio to the beginning
        pointSound.play();

        // Add timestamp for bonus point
        const bonusTimestamp = new Date().toLocaleString();
        timerData[index].timestamps.push({
            type: "Bonus Point",
            timestamp: bonusTimestamp
        });
    }

    function updateTimerList() {
        const timerListElement = document.getElementById("timerList");
        timerListElement.innerHTML = "";
        for (let i = 0; i < nameList.length; i++) {
            const listItem = document.createElement("li");
            listItem.textContent = `${nameList[i]}: ${timerData[i].points} points`;

            const avatarImage = document.createElement("img");
            avatarImage.src = `path/to/avatars/${nameList[i].toLowerCase()}-avatar.jpg`; // Update the path and file name
            avatarImage.className = "avatar";

            const timestampList = document.createElement("ul");
            for (const timestamp of timerData[i].timestamps) {
                const timestampItem = document.createElement("li");
                timestampItem.textContent = `${timestamp.type} at ${timestamp.timestamp}`;
                timestampList.appendChild(timestampItem);
            }

            const timerBar = document.createElement("div");
            timerBar.className = "timerBar";
            timerBar.innerHTML = `<div id="timerFill_${i}" class="timerFill"></div>`;
            
            const pauseButton = document.createElement("button");
            pauseButton.textContent = "Pause";
            pauseButton.addEventListener("click", () => {
                togglePause(i);
            });

            const bonusPointButton = document.createElement("button");
            bonusPointButton.textContent = "Bonus Point";
            bonusPointButton.addEventListener("click", () => {
                addBonusPoint(i);
            });

            listItem.appendChild(avatarImage);
            listItem.appendChild(timerBar);
            listItem.appendChild(pauseButton);
            listItem.appendChild(bonusPointButton);
            listItem.appendChild(timestampList);

            timerListElement.appendChild(listItem);
        }
    }

    // Rest of your existing JavaScript code

    // Add the new functions here:

    function updatePointsChart() {
        const pointsData = nameList.map((name, index) => {
            const totalPoints = timerData[index].points;
            return {
                label: name,
                data: [totalPoints],
                backgroundColor: "red"
            };
        });

        const ctx = document.getElementById("pointsChart").getContext("2d");
        new Chart(ctx, {
            type: "bar",
            data: {
                labels: nameList,
                datasets: pointsData
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    }

    function updatePauseEventsScatterplot() {
        const scatterplotData = [];

        for (let i = 0; i < nameList.length; i++) {
            for (const timestamp of timerData[i].timestamps) {
                if (timestamp.type === "Pause") {
                    const pauseTime = new Date(timestamp.timestamp);
                    const dayOfWeek = pauseTime.getDay();
                    const timeOfDay = pauseTime.getHours() + pauseTime.getMinutes() / 60;
                    
                    scatterplotData.push({
                        x: dayOfWeek,
                        y: timeOfDay
                    });
                }
            }
        }

        const ctxScatterplot = document.getElementById("pauseEventsScatterplot").getContext("2d");
        new Chart(ctxScatterplot, {
            type: "scatter",
            data: {
                datasets: [{
                    data: scatterplotData,
                    backgroundColor: "red"
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: "Days of the Week"
                        },
                        ticks: {
                            beginAtZero: true,
                            stepSize: 1,
                            callback: function(value) {
                                return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][value];
                            }
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: "Time of Day"
                        },
                        max: 24,
                        min: 0,
                        stepSize: 1
                    }
                }
            }
        });
    }

    document.getElementById("addNameButton").addEventListener("click", () => {
        const nameInput = document.getElementById("nameInput");
        const name = nameInput.value.trim();
        if (name !== "") {
            addNameToList(name);
            nameInput.value = "";
        }
    });

    document.getElementById("startAllButton").addEventListener("click", startGameForAll);

    updateNameList();
    updatePointsChart();
    updatePauseEventsScatterplot();
</script>

</body>
</html>