Design reference

Learn Corporate IT by doing it

Sixteen weeks of real Corporate IT work. Practice stays on your machine and stays yours. The competition is scored on the server, and that is the part that counts.

Asset registerService deskEvidence you can show
Asset register Live
16
Week plan
8
Week 4 activities
20
Questions in the week 4 paper
3
Weeks signed off
This week

Week 4 · Data gathering and collection

Week 4 has eight activities. These four are the ones that carry the week, and the last of them is the hand-in. Work them in the order they are numbered.

01

Gathering Workbench

Six sections on data shapes, mining, collection and scraping. 420 XP.

Open
02

Selector Bench

Six pages, a real selector, and a site that gets redesigned under you. 480 XP.

Open
03

Register Trainer

Nineteen records, four decisions on each.

Open
04

Team Outcome Check

The hand-in gate. Checks whether the team's evidence is complete, traceable and safe enough for facilitator review.

Open

Where you are

Across the sixteen week plan.

Weeks signed off3 of 16
Week 4 activities1 of 8

What your supervisor sees

What the lab reports without asking you.

  • A row for every record judged on the Register Trainer
  • Which attempt it was, and which of the four decisions were right
  • The running notes for the week, in the facilitator console
Standing

One board, updated as you go

Lab work and the arcade land on the same board, because they are the same skill measured twice. It reads from the record, so it cannot drift from it.

This week

Live
1Seat A318+24
2Seat B291+16
3Seat C274+31

Seat names and scores are placeholders on this preview page.

Games for weeks 3 to 6

The arcade follows the syllabus

Week 4 is data gathering and the register, so week 4's game is collecting data under a clock. It is not a break from the week. It is the same week, faster.

What goes in the register
1 of 10 Score 0
Ten rounds, drawn from a bank of twelve70 percent to pass
Foundation, not a page yet

Sound and motion for the learning pages

fx.js and fx.css give a learning page the same feel language the weekly games already have: synthesized sound and small transform-and-opacity animations, nothing else. Nothing below is wired into a real page yet. This is where each effect is heard and seen on its own, before the next pass puts any of it to work.

One mute, not two

Toggling this writes to the exact same key jz_play_muted_v1 that every game's own sound button reads and writes. Mute it here, open a game page, and the game opens muted too, and the other way round.

Sound

Synthesized with WebAudio, no audio file. Each one starts only after you press its button, which is the same rule the browser itself enforces: no sound before a real click.

Tick

A soft tick for a step or a selection.

Correct

A rising two note for a correct answer.

Wrong

A flat low tone for a wrong answer.

Finish

A short chord for finishing a section.

Reveal

A light tone for revealing or opening something.

Animation

Transform and opacity only. Every one of these turns off under your system's reduced motion setting, and the element it touches ends up in the same correct place either way.

Press ripple

A small ring at the point of contact, for a press.

Pop

A brief scale up and back, for a state change.

4

Shake

A short side to side move, for a wrong answer.

Not this time.

Count up

A number climbing to its final value.

0

Progress fill

A bar filling to a fraction, on a transform, not a width.

Late-arriving content

A page that paints part of its own body from JavaScript, which is most of this lab, adds elements after fx.js has already run its first pass. Fx.scan() re-checks the page for anything new, the same job Motion.scan() already does for scroll reveal. The button below actually appends a new counter to the page and calls Fx.scan() on it.

Every control on this page calls the real Fx module shipped in fx.js. Nothing here is a mockup of an effect the module does not have.

Design preview. This page is not linked from the lab and is not part of the training plan. It exists so the look can be judged on one URL before it is applied to the real pages.