What You Just Learned

One Number Repainted the Whole Page

What You Just Did

When you moved the slider, a small program took your number, calculated a new set of colors, and swapped them into the page while you watched.

The Idea behind It

  • Variables and Events: The page listens for you to move the slider and stores your choice in a variable.
  • Color Math: Every color is calculated so text stays readable at every level, from 1% to 100%.
  • Saving a Preference: Your browser remembers your setting for the next visit.
  • Accessibility: The program checks contrast so people with low vision can still read the page.

Where You Would Learn This

CSE 110 Introduction to Programming, WDD 130 Web Fundamentals, and WDD 131 Dynamic Web Fundamentals, all in your first two semesters.

A computer can change a color. A person decides whether everyone can still read it.

Challenges

Ready for a Harder One?

Think the quick puzzles were easy? These go further. Every challenge is a real idea from computing, and every one shows you where you would master it at BYU-Idaho.

Challenge Activities

A robot on a grid finding its way around walls to a gold goal

Programming

Robot Path Puzzles

Nine levels, from a simple corridor to a full spiral. Can you earn three stars on every one?

Two switches wired through an AND gate to a glowing lamp

Hardware

Circuit Builder

Pick AND, OR, and NOT gates to light the lamp, then build a circuit that adds two numbers.

Scrambled letters decoded into the word HELLO next to a padlock

Security

Security Puzzles

Crack secret messages, then think like a defender and spot the weakest password.

Eight switches set to 01000001, which equals 65, the letter A

How Computers Think

Flip the Bits

Flip eight switches to make numbers and letters, and see how computers store everything.

Like Solving These?

This Is What the Majors Are Made Of

If you enjoyed figuring these out, you will love what comes next. Find the major that fits you.

Programming

Robot Path Puzzles

Nine levels that get tougher as you go, from a simple corridor to a full spiral. Three stars on every level means the shortest path in the fewest blocks. Your stars are saved on this device.

Practice: Sequences, loops, debugging, and optimization

Skills You Are Practicing

  • Sequencing
  • Loops
  • Debugging
  • Optimization

This puzzle runs on HTML, CSS, JavaScript, and a search algorithm that finds the best possible answer. You can learn to build tools like it.

Turn on JavaScript to play the robot puzzle.

Hardware

Circuit Builder

Six levels. Flip the switches, pick a gate, and watch the truth table check every combination. The last level is the circuit that adds numbers inside every processor.

Practice: Logic gates, truth tables, and how hardware computes

Skills You Are Practicing

  • Logic Gates
  • Truth Tables
  • Binary Addition

You learn how gates become processors in ECEN 106 Computer Systems, and the logic behind truth tables in CSE 280 Discrete Mathematics.

Turn on JavaScript to play this puzzle.

Security

Security Puzzles

Five levels. Crack three secret messages with a cipher key, then switch sides and judge passwords like a security pro.

Practice: Encryption, keys, and thinking like a defender

Skills You Are Practicing

  • Encryption
  • Brute Force
  • Password Strength

Security thinking shows up across both majors, and CSE 453 Computer Security takes it deep.

Turn on JavaScript to play this puzzle.

How Computers Think

Flip the Bits

Six levels. Each switch is one bit worth double the switch to its right. Make the target number, then spell letters the way a computer stores them.

Practice: Binary and how computers store information

Skills You Are Practicing

  • Binary
  • Place Value
  • Text Encoding

You meet binary from day one in CSE 110 Introduction to Programming and see how hardware stores it in ECEN 106 Computer Systems.

Turn on JavaScript to play this puzzle.

Skills behind the Puzzle

How This Puzzle Works and How to Build It

What You Do

You write a list of exact instructions, and the robot carries them out one at a time. A Repeat block is a loop: One instruction that runs many times.

The Ideas behind It

  • Sequencing: Computers do exactly what you say, in exactly the order you say it.
  • Loops: Repeating instructions keeps code short, readable, and easy to change.
  • Debugging: When the robot crashes, you trace the failure to one step and fix it.
  • Optimization: The shortest path and the fewest blocks are two different kinds of better. Engineers weigh both.

How This Puzzle Was Built

  • HTML: The structure of the board, the blocks, and the buttons.
  • CSS: The look and layout, with colors that stay readable at every Lights level.
  • JavaScript: The blocks you stack, the robot’s animation, and the scoring.
  • Algorithms: A breadth-first search finds the shortest path on every level, and dynamic programming works out the fewest blocks, so the star targets are always exact.

Where You Would Learn This

WDD 130 Web Fundamentals and WDD 131 Dynamic Web Fundamentals support the HTML, CSS, and JavaScript; CSE 110 and CSE 111 build the programming foundation; CSE 212 Programming with Data Structures and CSE 381 Algorithms & Complexity connect to search and optimization.

The robot only follows the plan. You made the plan.

What You Just Saw

Breadth-First Search

What the Computer Did

It checked every square one move away, then every square two moves away, then three, spreading out like a ripple until it reached the goal. Because it always checks the closest squares first, the first path it finds is guaranteed to be the shortest.

The Ideas behind It

  • Graphs: The grid is a graph. Squares are nodes, and moves are the edges between them.
  • Search Algorithms: The same idea powers map directions, network routing, and game AI.
  • Complexity: Computer scientists measure how much work an algorithm does as the problem grows, so it stays fast at scale.

Where You Would Learn This

CSE 212 Programming with Data Structures and CSE 381 Algorithms & Complexity; CSE 351 Parallelism & Concurrency helps you think about coordinating search work across concurrent branches.

The computer searched fast. A person decided what “best” means and wrote the search.

What You Just Saw

Bidirectional Search

What the Computer Did

It searched outward from the robot and the goal at the same time. When the two frontiers met, the computer had connected the two partial routes into a shortest path.

The Ideas behind It

  • Two frontiers: Each search checks the next layer from its own starting point.
  • Less work: On larger maps, meeting in the middle can explore fewer squares than searching from one end.
  • Concurrency: CSE 351 Parallelism & Concurrency explores how independent work can be coordinated safely.

Where You Would Learn This

CSE 381 Algorithms & Complexity and CSE 351 Parallelism & Concurrency.

Two search teams can cover more ground—but a person still decides when their answers are allowed to join.