DIKULT105 · Autumn 2026
Pick a tool for your next experiment. These guides show you how to use it.
NEW ROOM / COMPUTING HISTORY
Feed program cards, rewrite Turing’s tape, find a relay bug and compose a tiny computer score.
Boot the time machine →LAB 1 → LAB 2 / MAKE YOUR PAGE RESPOND
You built the page in Lab 1. Now give it a response: choose a machine, try one action, and bring it into your own project.
YOUR CHALLENGE
Send three signals. Watch the counter change.
HTML makes the button. CSS gives it a style. JavaScript listens for a click and changes the page.
<button id="future">See the future</button>
Signals received / 0
button.addEventListener("click", () => {
count += 1;
});In your own page: make one button change one sentence. Then try Tab and Enter.
Need a heading, image, list, link or control? Look up the element when your project needs it.
Open MDN's complete HTML elements referenceOptional reference. The JavaScript beginner guide explains the few elements needed for your first click.
YOUR CHALLENGE
Scan the paragraph and button. Then scan #missing.
An id such as id="story" is selected with #story. A class such as class="story" is selected with .story. No match returns null.
<p id="story">My place, today.</p>
The bus stop is quiet.
Choose a selector.
document.querySelector("#eq-scan-story");In your own page: find the id of the paragraph you want to change. Use that exact id in your JavaScript.
YOUR CHALLENGE
Show the future. Click again to return.
State is a value your code keeps. Here, false means “now” and true means “future”. Each click switches the value and the sentence.
<p id="story">My place, today.</p>
The bus stop is quiet.
showingFuture = false
showingFuture = !showingFuture; story.textContent = showingFuture ? future : now;
In your own page: let a second click bring back the original text. Check both directions.
YOUR CHALLENGE
Let one signal arrive. Cancel the next one.
setTimeout queues an action after a delay. clearTimeout cancels that queued action before it runs.
<button id="send">Send a signal</button>
Relay ready.
const timer = setTimeout(sendSignal, 2000); clearTimeout(timer);
In your own page: decide whether a delay helps the story. Give people a way to stop it if they need one.
YOUR CHALLENGE
Run the broken line. Choose the # selector. Run again.
The HTML has an id. A dot asks for a class, so the first run finds nothing. A hash asks for the id and repairs the connection.
<p id="eq-repair-story">Waiting for a signal.</p>
Waiting for a working selector.
document.querySelector(".eq-repair-story").textContent = "Signal received";Ready to run.
In your own page: read the error, check the selector against the HTML, change one thing, then run it again.
YOUR CHALLENGE
Try phone and laptop widths. Break the width, then repair it.
A fixed 640px box spills out of a 360px screen. A 100% width follows its container. The maximum width stops it growing forever.
<main class="my-page">A story to read.</main>
Responsive sample ready.
width: 100%; max-width: 720px;
In your own page: check that text wraps, buttons remain usable and the page does not scroll sideways on a phone.
EQUIPMENT ROOM · CONSTRUCT TOOLKIT
Alinta's six templates, the rules to remember, shortcuts, fixes and tricks. Come back here whenever you build.
What you learned in Lab 1 and 2 is the same thing Construct does with buttons.
| Idea | Lab 1 · HTML/CSS | Lab 2 · JavaScript | Lab 3-4 · Construct |
|---|---|---|---|
| Things on a scene | Elements on a page: <p>, <button> | querySelector("#story") finds one | Objects on a Layout: Text, Sprite |
| Properties | CSS: color, font-size | textContent | Properties panel: Text, Size, Color, Initially visible |
| When → do | (not yet) | addEventListener("click", …) | Event: On tap object → Set text / Set visible |
| Remember a state | Second click changes it back | Toggle, variables, Go to layout | |
| Show it to someone | Open the page | Test both clicks | Preview, then Lab 5: test and publish |
Download them from Mitt UiB › Files ↗, then Menu › Project › Open local file in Construct. Each card says what it teaches and what to try first.
TEMPLATE 1 · SCENE BUILDING
SceneSetUpForStudents.c3p
First try: Move a prop inside North. Preview. Move it outside again and compare.
The layout decides what the visitor sees.
Used in: Lab 3 and your own scenes
Open the guide →
TEMPLATE 2 · VARIABLES
SceneSetUpFullExample.c3p
First try: Preview and tap the cupboard twice. Open its event sheet and find the tap condition and the cupboardOpen variable.
A variable remembers which state is showing.
Used in: Lab 4: rules
Open the guide →
TEMPLATE 3 · GO TO LAYOUT
SceneSetUpHowToMakeMovementExample.c3p
First try: Travel from North to East. Repair the return arrow, then test the round trip.
A visible arrow needs a rule and the right destination.
Used in: Lab 4: rooms
Open the guide →
TEMPLATE 4 · COLLISIONS
redaction_game.c3p
First try: Preview the collision that reveals the text. Change the hidden words and test again.
You can change the meaning and keep the interaction.
Used in: Lab 4 and 5
Open the guide →
TEMPLATE 5 · TAP REVEAL
MappingasNonlinearStorytelling (2).c3p
First try: Choose a map and add one sentence about a place you know. Then build the tap reveal.
Placement and interaction tell a nonlinear story.
Used in: Lab 3, Part 2
Open the guide →
TEMPLATE 6 · ARRAYS AND JSON
NPC_Text (2).c3p
First try: Tap MainCharacter. Change one word in NewArray.json. Preview and tap several times.
Different word lists produce different sentences.
Used in: Extra
Open the guide →
Behavior
Floating, bobbing, pulsing. Movement, Period, Magnitude.
Behavior
Fade in, fade out, or both. Great for a reveal.
Action
Blink an object for a moment when something happens.
Behavior
Smoothly move, grow or turn to a value: Tween › Tween one property.
Behavior
Let the visitor move things by hand.
Behavior
Walk with the arrow keys, or run and jump.
Behavior
The camera follows an object around a big layout.
Behaviors
Things that fly and clean themselves up.
Action
Pause between actions: show a line, wait 2 seconds, show the next.
Condition
Turns a constant check into a single moment.
Action
Move the visitor to another scene or room.
Event sheet
Remember a score, a choice or a visit across layouts.
Event sheet
Name parts of your sheet so you can find them again.
Event sheet
Write a set of actions once and call it from many events.
Preview menu
See every object and variable live while the project runs.
Object
Keep data even after the browser is closed.
THE LAB FLOOR / EIGHT MACHINES
BEFORE VS CODE. BEFORE CONSTRUCT. BEFORE AI.
Every tool in this room stands on three people who built computers before electricity ran them. Their machines were made of gears, cards and paper tape. Their questions are still ours.
Charles Babbage1791-1871
He published his Difference Engine plan in 1822 and conceived the Analytical Engine in 1834. Neither complete engine was built in his lifetime. The Analytical Engine was meant to be programmed with punched cards.
In this lab: every Construct event is a tiny engine. Condition in, action out.
Ada Lovelace1815-1852
In 1843 she published notes on Babbage’s engine. Note G describes an algorithm for calculating Bernoulli numbers on the proposed Analytical Engine. She also saw that the machine could work with music and symbols, not just numbers.
In this lab: your JavaScript is a list of steps, just like Note G.
Alan Turing1912-1954
In 1936 he imagined a machine that reads and writes symbols on an endless tape: a foundational model of computation. In 1950 he asked “Can machines think?” and proposed the imitation game.
In this lab: when you code with AI, you are working inside his question.