31 Dec 2025

hotseat-game for Units 5 and 6

24 Dec 2025 Update

test for PHP

general-purpose CSV viewer

game for CC2 Unit 5

10 Nov 2025 update:

This is a link to INDEX.HTML in the 10nov2025 directory.

This is a link to algebra_exercise.HTML in the 10nov2025 directory.

This is a link to algebra_double.HTML in the 10nov2025 directory.

This is a link to equation_builder.HTML in the 10nov2025 directory.

24 Oct 2025 update:

This is a link to INDEX.HTML in the 24oct2025 directory.

Here is the actual code:

<!DOCTYPE html>
<html>
  
  <script>
        // Create audio context for generating sounds
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        
        function playTone(frequency, duration, type = 'sine') {
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);
            
            oscillator.frequency.value = frequency;
            oscillator.type = type;
            
            gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
            
            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + duration);
        }
        
        function playBeep() {
            playTone(800, 0.1, 'sine');
        }
        
        function playBoop() {
            playTone(400, 0.15, 'sine');
        }
        
        function playDing() {
            playTone(1200, 0.2, 'sine');
            setTimeout(() => playTone(1600, 0.15, 'sine'), 50);
        }
        
        function playBuzz() {
            playTone(200, 0.2, 'sawtooth');
        }
    </script>

</html>

This is a link to mp3demo.HTML in the 24oct2025 directory.

We need a Tic-Tac-Toe game: This is a link to TTT.HTML in the 24oct2025 directory.

Here is the actual code:

<!DOCTYPE html>
<html>
    
  <script>
    const board = document.getElementById('board');
    const status = document.getElementById('status');
    const reset = document.getElementById('reset');
    let cells = [];
    let game = ['', '', '', '', '', '', '', '', ''];
    let currentPlayer = 'X';
    let gameActive = true;

    // Audio context for sound effects
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

    function playSound(freq, duration) {
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      
      osc.connect(gain);
      gain.connect(audioCtx.destination);
      
      osc.frequency.value = freq;
      osc.type = 'sine';
      
      gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
      
      osc.start(audioCtx.currentTime);
      osc.stop(audioCtx.currentTime + duration);
    }

    function checkWinner() {
      const wins = [
        [0,1,2], [3,4,5], [6,7,8], // rows
        [0,3,6], [1,4,7], [2,5,8], // cols
        [0,4,8], [2,4,6]           // diagonals
      ];
      
      for (let w of wins) {
        if (game[w[0]] && game[w[0]] === game[w[1]] && game[w[0]] === game[w[2]]) {
          return game[w[0]];
        }
      }
      
      return game.includes('') ? null : 'tie';
    }

    function handleClick(i) {
      if (!gameActive || game[i]) return;
      
      game[i] = currentPlayer;
      cells[i].textContent = currentPlayer;
      cells[i].style.color = currentPlayer === 'X' ? '#667eea' : '#f093fb';
      
      // Play sound - X gets higher pitch, O gets lower
      playSound(currentPlayer === 'X' ? 800 : 400, 0.15);
      
      const winner = checkWinner();
      if (winner) {
        gameActive = false;
        if (winner === 'tie') {
          status.textContent = "It's a tie!";
          playSound(300, 0.3);
        } else {
          status.textContent = `${winner} wins! 🎉`;
          // Victory sound
          playSound(523, 0.1);
          setTimeout(() => playSound(659, 0.1), 100);
          setTimeout(() => playSound(784, 0.2), 200);
        }
        return;
      }
      
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      status.textContent = `${currentPlayer}'s turn`;
    }

    function initGame() {
      board.innerHTML = '';
      cells = [];
      game = ['', '', '', '', '', '', '', '', ''];
      currentPlayer = 'X';
      gameActive = true;
      status.textContent = "Your turn (X)";
      
      for (let i = 0; i < 9; i++) {
        const cell = document.createElement('button');
        cell.className = 'cell';
        cell.onclick = () => handleClick(i);
        board.appendChild(cell);
        cells.push(cell);
      }
    }

    reset.onclick = () => {
      playSound(600, 0.1);
      initGame();
    };

    initGame();
  </script>
    
</html>

19 Sep 2025 update: SOUND FILES

19 Sep 2025 update: This is a link to INDEX.HTML in the 19sep2025 directory.

Many students want to start spending money on LLMs to make customized chat programs; because that costs money, we won't do it unless it is a core learning objective. We can make a new chat demo easily enough.
Before we worry about PHP and JavaScript, we should introduce old-fashioned HTML and perhaps a little bit of CSS.

We should start with some old-fashioned a-href HTML Links:

HTML links are defined with the A HREF and /A tags:

The following links use HTTPS to point at other sub-websites in this domain.

This is a link to the fancy "emotional wellness" page. It uses https://emotionalwellness.gadgeteering.org/ because it is going to a separate sub-website in this domain.

This is a link to the forum, which requires wordpress.

This is a link to the wordpress blog.

This is a link to the demonstration page that was written in April of 2025.

We can use P and /P tags to define paragraphs, but old-fashioned HTML is forgiving: we can throw paragraph breaks in almost anywhere and the page will render correctly.

Every website must be "hosted" on someone's machine. In the early days of the web, only universities or research laboratories were sophisticated enough to host websites. Most commercial websites are either hosted by partner companies or by the company that owns the website. The files for this particular section of the website exist in a particular directory of the host's server. In this case, we don't know where the server really is located: we do know that the server has a file directory called "public_html."

We should also note that old-fashioned HTML sites can be pretty forgiving with directory structure. For example, suppose we want to have a subdirectory for cute animal pictures: This is a SUSPICIOUS link to the "cute" subdirectory with no HTTPS. It just uses "public_html/cute" Does it work in your browser, or does the extra "public_html" mess it up?

This is a link to INDEX.HTML in the "cute" subdirectory that does use HTTPS but does not include the "public_html". It uses "https://plainhtml.gadgeteering.org/cute/index.html" Does it work in your browser?

This is a link to INDEX.HTML in the "cute" subdirectory that does not use HTTPS and also does not include the "public_html". It uses "/cute/index.html" Does it work in your browser?

This is a link to the "cute" subdirectory without the "public_html" string in its path and with no HTTPS. It uses "/cute" but does not specify a page name. We expect it will go to a default page. Does it work in your browser?

Let's try to make a meaningless link to demonstrate how 404 works:

This is a link to a page that does not exist in the "cute" subdirectory.

Old-fashioned HTML uses a HEAD tag. However, you probably won't see the title embedded in the HEAD tag unless you hover your mouse over the browser tab.

If we line up our image correctly with a directory name, we should see an actual image and not just an icon for a broken image link: