Interface design · for approval

Test Generator, rebuilt for the browser

Proposed screens for the Python web replacement of the VB6 desktop and Java servlet tiers. Nothing here is built yet — this is the look and the interaction model, put in front of you before any code is written. Sample content throughout is representative, not real candidate data.

Design system

Approve this and the screens that follow are just applications of it. Two type registers, one accent, and semantic colour kept strictly separate from the accent so that pass, fail and time-remaining never compete with an ordinary button.

The organising idea The candidate surfaces are set as paper — a serif face, wide measure, generous rests, and answer options drawn as the optical-mark bubbles this product has always scanned. The administrator surfaces are set as a tool — system sans, dense tables, tight controls. A candidate should feel they are sitting a paper; an administrator should feel they are operating a console.
Accent#2D4EA8
Graphite#2A2F3A
Pass#1B7A4B
Fail#B4243A
Time#B76A00
Ground#F6F7FB
Display · candidate surfaces, certificates
Which sequence describes energy isolation?

A serif carries the register of an examination paper and prints correctly on certificates. Used for question stems, answer text and result headings — never in the admin console.

Interface · administrator surfaces
System sans at 15/1.6. Dense enough for a table of 400 candidates, legible enough to read all day. Labels are sentence case; only the smallest utility labels are set in caps with letter-spacing.
Data · timers, scores, identifiers
24:18 remaining  ·  88.0 / 100.0  ·  SU-9241  ·  TST-108

Monospace with tabular figures everywhere digits must line up or tick down without the layout shifting.

State, not just number

PassedFailed In progressNot started Scheduled

Every status reads at a glance from shape and colour together, so it survives greyscale printing and colour-blind viewers.

Controls

TestSurveyBoth

Answer marks

  • A

    Selected — filled graphite

  • B

    Unselected

Why a serif

The product's output is examination papers and certificates. A serif is the register those documents already live in, and it distinguishes the candidate experience from the admin console without a second colour system.

Accessibility floor

Body text meets WCAG AA on both grounds. Status is never colour-alone. Targets are at least 40 px on the candidate side, where people are stressed and sometimes on a touchscreen.

Both themes

Every screen here is defined in tokens and rendered in whichever theme you pick above. Dark is not an inversion — the accent lifts to #8AA6F2 to hold contrast on a dark ground.

Sign in

Replaces login.tmpl. Institution name, address line and logo continue to come from the admin table, so an installation still looks like its own.

https://assess.riverside.edu/sign-inCandidate
Riverside Technical College
Center for Assessment & Certification

What changed

One column, one job. The old screen carried fifteen conditional alert branches in JavaScript; errors now appear inline beside the field that caused them.

Authentication

Unchanged behaviour: local, LDAP or Active Directory per the authentication table. Argon2id replaces unsalted MD5/SHA-256, migrating on first successful sign-in.

Language

Switch the control at the top of this page — the labels here are the real strings from the shipped catalogues, not invented translations.

My assessments

Replaces test_list.tmpl. Filtered by enrolment, the active window on tests, and remaining attempts under the retake policy.

https://assess.riverside.edu/assessmentsCandidate
Riverside Technical CollegeAssessment Centre
JM Julien Moreau

Choose an assessment

Three assessments are open to you. Once started, the timer runs continuously.

AssessmentCourse ClosesAttempts
Electrical Safety — Level 2
Lockout/tagout, arc-flash boundaries, PPE selection
ELEC-204 31 Aug 2026 0 of 3 used
Confined Space Entry
Permit procedures, atmospheric testing, rescue planning
ELEC-204 15 Sep 2026 1 of 3 used
Post-course survey
Anonymous feedback on course delivery
ELEC-204 30 Sep 2026 Survey

Attempts made visible

The old list showed a test name and little else; candidates could not see how many attempts they had left until refused. Remaining attempts and the closing date are now on the row.

Resume, not restart

An interrupted attempt shows Resume and returns the candidate to the question they left, with the server-side clock still authoritative.

Survey is labelled

tst_testtype 1 is a survey. It is marked as one, because a survey with a countdown reads as an exam and alarms people.

Rules & consent

Replaces disclaimer.tmpl and the begin-test message. Driven by tst_disc — none, system-wide, or per test — and by the message table.

https://assess.riverside.edu/attempt/start?test=108Candidate
Electrical Safety — Level 2Before you begin
JM Julien Moreau

Read this before you start

Questions
25
across 3 sections
Time limit
45:00
runs continuously
Pass mark
80%
every section must pass

This assessment is the property of Riverside Technical College. By continuing you confirm that you are the enrolled candidate, that you will complete the assessment without assistance, and that you will not reproduce or distribute its contents.

You may move freely between questions and change your answers until you submit. The clock does not stop if you close the window.

Facts before prose

Question count, time limit and pass mark are the three things every candidate wants and the old screen buried in a paragraph. They lead.

Consent is explicit

The primary action states what the candidate is agreeing to. "I understand — begin" is a consent record, not just navigation.

Honest about the clock

Saying plainly that the clock keeps running removes the single most common support call.

Question — multiple choice

The screen a candidate spends nearly all their time on. Everything not needed to answer has been removed from it.

https://assess.riverside.edu/attempt/9241/question/7Candidate
Electrical Safety — Level 2Section 2 — Isolation procedures
24:18left
JM
Question 7 of 25 Section 2 of 3 4 points

Which sequence correctly describes the first three steps of an energy-isolation (lockout/tagout) procedure?

Select one answer.

  • A

    De-energise the equipment, then verify the absence of voltage, then apply the lock and tag.

  • B

    Verify the absence of voltage, then de-energise the equipment, then notify the supervisor.

  • C

    Notify affected workers, isolate the energy source, then apply the lock and tag before verifying.

  • D

    Apply the lock and tag, then notify affected workers, then isolate the energy source.

Answered 6 of 25

The bubble is the motif

Answer options are drawn as optical-mark bubbles that fill with graphite when chosen — the same mark this product has read off NCS and LXR scan forms for twenty years. It is used here and nowhere else.

The clock is honest

Server-authoritative, monospace and tabular so it never shifts the layout as it counts down. It turns amber at five minutes and the paper is untouched — no flashing, no modal stealing focus mid-sentence.

One question, full width

Measure is capped near 64 characters. Long stems and long options stay readable, which matters most for the candidates who are slowest.

All eleven question types

Every type the engine supports, drawn in the same system. These are the interaction patterns to approve — each appears inside the full exam chrome shown on the previous screen.

Multiple choice

mc
  • A

    Isolate, verify, then lock

  • B

    Lock, then isolate

True / false

tf
  • T

    True

  • F

    False

Multiple response

cb

Square marks signal that more than one may be chosen.

  • ✓

    Insulated gloves

  • ✓

    Arc-rated face shield

  • Cotton overalls

Matching

ma
Class 0 glove → 1 000 V
Class 2 glove → Choose…

Ordering

o
⠿ 1 Notify affected workers
⠿ 2 Isolate the energy source

Fill in the blanks

fitb

The arc-flash boundary must be calculated where the incident energy exceeds cal/cm² at a working distance of mm.

Short answer

sa

Marked against an accepted-answer list; case and spacing tolerant.

Numeric

numeric
cal/cm²

Accepts a tolerance band, so 1.19–1.21 can score full marks.

Essay

essay
Saved automatically184 / 500 words

Point and click

pac

Click stored as coordinates and scored against the defined region.

Likert

likert

The practical exercises prepared me for the assessment.

1 2 3 4 5
Strongly disagreeStrongly agree

One mark language

Round bubble means "choose one", square means "choose several". A candidate learns it once, on question one, and it holds for every type.

Keyboard first

Every type is operable without a mouse — options take number keys, ordering moves with arrow keys, matching opens a listbox. Point-and-click keeps a keyboard fallback grid.

Touch targets

Nothing interactive is under 40 px on the candidate side. Testing centres increasingly use tablets and the old UI predates that entirely.

Review & submit

New screen with no equivalent in the current product. Candidates currently discover unanswered questions only after submitting.

https://assess.riverside.edu/attempt/9241/reviewCandidate
Electrical Safety — Level 2Review before submitting
04:52left

You have answered 22 of 25

Three questions are unanswered and two are flagged. Select any question to return to it.

Answered Not answered Flagged Current

Why this is new

The single most common candidate complaint in any assessment system is submitting with questions accidentally left blank. A navigator costs one screen and removes the whole class of dispute.

Flagging

"Flag for review" is stored with the attempt, so it survives a disconnection and a resume.

Time pressure, handled

Under five minutes the clock goes amber. It does not flash, block, or open a dialogue — panic loses more marks than the missing minute.

Time expired

Replaces time_up.tmpl. Reached when the server-side deadline passes — the browser clock is never authoritative.

https://assess.riverside.edu/attempt/9241/time-expiredCandidate
Electrical Safety — Level 2Attempt closed
00:00left
⏱

Your time has ended

Everything you answered has been saved and submitted for marking — including the question you were working on. You answered 22 of 25 questions.

Reassure first

The first thing a candidate needs to know is that their work was not lost. That sentence leads; the count follows.

No dead end

The old screen terminated the session. This one continues to the result, or back to the assessment list if results are withheld.

Partial work counts

The in-progress answer is committed by the same transaction that closes the attempt, so nothing is lost in the last second.

Result

Replaces testreport.tmpl. Section breakdown reads from summary_section; per-question detail appears only when the test allows it.

https://assess.riverside.edu/results/9241Candidate
Electrical Safety — Level 2Attempt 1 · 21 July 2026
JM Julien Moreau
94%Score

You passed

Pass mark 80% · every section met its criterion

Correct23 / 25
Points94.0 / 100.0
Time used44:12
Attempt1 of 3

By section

Section 1 — Hazard identification
8 of 8 correct100%
Section 2 — Isolation procedures
9 of 10 correct90%
Section 3 — Personal protective equipment
6 of 7 correct86%

Pass is a sentence, not a colour

"You passed" is stated in words above the dial. Colour and the ring reinforce it; neither is load-bearing on its own.

Section detail matters

With all-sections-passed marking, an overall percentage can hide a failed section. The breakdown makes the actual rule visible.

Answer review is conditional

Shown only when tst_showcorrectanswer and the review policy allow it — otherwise the button is absent, not disabled.

Certificate

Rendered server-side to PDF. Fonts must embed Latin-1, Latin-2, Cyrillic and CJK coverage so the same template works in all ten languages.

https://assess.riverside.edu/certificate/9241.pdfPDF
Certificate of completion

Riverside Technical College

This is to certify that

Julien Moreau

has successfully completed Electrical Safety — Level 2 with a score of 94%, meeting the requirements of course ELEC-204.

21 JUL 2026Date of award
SU-9241Verification code
21 JUL 2029Valid until

Verifiable

The verification code resolves to a public page confirming the award — replacing "is this certificate real?" phone calls.

Expiry is on the face

Safety certifications lapse. Printing the expiry date is what the certificate is actually for in a compliance audit.

Print, not screen

Set in the serif at print weights, on white, with no reliance on colour — it survives a monochrome laser printer, which is how most of these are produced.

Administrator dashboard

New. The desktop product opens on an empty tree; an administrator's first question is always "what needs me today", and nothing answered it.

https://assess.riverside.edu/adminAdministrator

Dashboard

Search tests, candidates…
In progress
37
attempts right now
Completed today
214
▲ 12% vs last Tuesday
Pass rate
86.4%
▼ 2.1% this month
Needs marking
18
essay responses

Needs your attention

18 essay responses awaiting marking
Electrical Safety — Level 2 · oldest 4 days
3 stale locks
Attempts interrupted over 24 hours ago
Licence expires in 34 days
142 of 250 seats in use

Live attempts

37 active
Amara Osei
Confined Space Entry
Q14/2518:04
Piotr Nowak
Electrical Safety — L2
Q7/2531:47
Julien Moreau
Electrical Safety — L2
Q22/2504:52

Work queue, not vanity metrics

"Needs your attention" is the panel that earns the screen. Essays to mark, locks to release, licence about to lapse — each with the action on the row.

Live attempts

Invigilators currently have no way to see who is mid-exam. This is the single most requested capability in any assessment product.

Twelve modules, three groups

The desktop console's twelve tabs regroup into Content, People and Operations — how administrators actually describe their own work.

Tests

Replaces the FCOTG_TG tab. One row per test, with the state that determines whether candidates can actually sit it.

https://assess.riverside.edu/admin/testsAdministrator

Tests

Search…
AllActiveDraft
TestTypeQuestionsWindow AttemptsStatus
Electrical Safety — Level 2
TST-108 · 3 sections · 45 min
Test25 of 140 1 Jun – 31 Aug318 Active
Confined Space Entry
TST-112 · 2 sections · 30 min
Test20 of 86 1 Jun – 15 Sep204 Active
Working at Height — Level 1
TST-121 · 2 sections · 30 min
Test18 of 54 —0 Draft
Post-course survey
TST-119 · 1 section · untimed
Survey12 1 Jun – 30 Sep176 Survey
Hazard Communication (2025)
TST-097 · 1 section · 20 min
Test15 of 15 closed 31 Dec1 042 Archived

"25 of 140"

A bank-drawn test shows how many questions a candidate sees against how many the bank holds. That relationship is the most misunderstood setting in the product.

Status is derived, not stored

Active, Draft and Archived are computed from tst_active and the date window, so a test cannot claim to be active while being outside its own window.

Nothing is deleted

Archived keeps results intact and reachable. The schema has no cascade deletes and results outlive the tests that produced them.

Test setup

The densest screen in the product — the retake matrix, timing, bank draw and pass rules that frmTestProperties spread across five tabbed dialogues.

https://assess.riverside.edu/admin/tests/108/setupAdministrator

Electrical Safety — Level 2

Active

Timing

TimedOverall limit for the whole test
minutes
Per sectionTest only
Sections carry their own clocks
Accumulate time across attempts Remaining time carries into a resumed attempt

Retakes

NoneLimitedUnlimited
Three settings that interact; the sentence form removes the guesswork.

Question bank draw

25 of 140
SubjectAvailableDraw
Hazard identification428
Isolation procedures5710
Personal protective equipment417

Passing

Overall percentageEvery section must pass
per cent
per cent
Show the score to the candidate
Show correct answers afterwards
Issue a certificate on passing

Settings written as sentences

"A retake starts from a fresh draw of questions, answers cleared" is the same three enum values the schema stores, phrased so nobody has to remember what value 2 meant.

The draw is shown, not described

Available against drawn, per subject, totalling into the badge. A misconfigured bank is visible before a candidate hits it.

Grouped by decision

Four cards matching the four questions an author actually asks: how long, how many tries, which questions, and what counts as a pass.

Question editor

Replaces the RTF editor control. Authors now produce HTML; existing RTF is converted once and never written again.

https://assess.riverside.edu/admin/questions/4471/editAdministrator

Question 7

Multiple choice
Saved 12:04
Converted from RTF

Which sequence correctly describes the first three steps of an energy-isolation (lockout/tagout) procedure?

Answers

✓Answer Points
A De-energise, verify absence of voltage, then lock and tag0
B Verify absence of voltage, de-energise, then notify0
C Notify workers, isolate, then lock and tag before verifying 4
D Lock and tag, notify workers, then isolate0

Properties

Shuffle answers
Award partial credit

Performance

Asked318
Correct71%
Discrim.0.42

Distractor B is chosen by 19% of candidates who pass overall — worth reviewing.

The correct answer is obvious

Marking is a points column, and the scoring row is tinted. In the desktop editor the correct answer was a radio button in a separate dialogue.

Item statistics in place

Facility and discrimination are already computed for the item-analysis report. Surfacing them beside the question is where they change behaviour.

RTF is legacy

The badge marks content converted from the old format. Nothing writes RTF back; the column stays for rollback only.

Question bank

Replaces FCOTG_QBANK. Filter by subject, type and performance; select and push into a test.

https://assess.riverside.edu/admin/bankAdministrator

Question bank

1 284 questions
Search question text…
All subjectsHazard IDIsolationPPE
All typesMCEssay
QuestionTypeSubject AskedCorrectDiscrim.
✓
Which sequence correctly describes the first three steps…
Q-4471
Multiple choiceIsolation 31871%0.42
Identify the arc-flash boundary on the diagram shown.
Q-4472 · has media
Point and clickHazard ID 29658%0.51
Describe the steps required before entering a permit-required space.
Q-4480
EssayIsolation 204——
Match each glove class to its maximum working voltage.
Q-4491
MatchingPPE 31884%0.29
Cotton overalls provide adequate arc-flash protection.
Q-4402 · flagged: 96% correct
True / falsePPE 1 042 96%0.04

Statistics are the point

A bank of 1 284 questions is unmanageable by title. Facility and discrimination let an author find the items that are not doing any work.

Weak items surface themselves

The last row is flagged: 96% answer it correctly and it discriminates at 0.04 — it separates nobody. That is a question to retire.

Selection is bulk

Square marks again mean multi-select. Chosen questions push straight into a test section or a new draw.

Candidates

Replaces FCOTG_TAKER and FCOTG_USERS. Enrolment, attempt history and the legacy-password migration all live here.

https://assess.riverside.edu/admin/candidatesAdministrator

Candidates

1 847
Name, ID or email…
412 candidates still hold a legacy password hash They will be upgraded automatically the next time each one signs in. The old verification path can be switched off once this reaches zero.
CandidateIDCoursesLast attempt ResultAccess
JM
Julien Moreau
j.moreau@riverside.edu
RT-40118ELEC-20421 Jul 2026 94% pass Local
AO
Amara Osei
a.osei@riverside.edu
RT-40119ELEC-204, SAFE-101In progress Q14 of 25 Directory
PN
Piotr Nowak
p.nowak@riverside.edu
RT-40204ELEC-20419 Apr 2026 72% fail Local
SK
Sofia Kovács
s.kovacs@riverside.edu
RT-40311SAFE-101— Not started Suspended

Migration made visible

The password upgrade is a background process with a definite end. Showing the remaining count turns "when can we turn the old path off" into a number.

Access is a column

Local, Directory or Suspended, read from the authentication configuration — currently only discoverable by attempting a sign-in.

In-progress is a state

A candidate mid-attempt shows their position. It is what an invigilator standing in the room needs to see.

Reports

Replaces the Crystal Reports runner. The 32 queries behind the existing reports are recovered from source; only the layouts are re-drawn.

https://assess.riverside.edu/admin/reports/item-analysisAdministrator

Item analysis

Attempts
318
completed
Mean score
84.2%
σ 11.4
Pass rate
86.4%
275 of 318
Weak items
3
discrimination < 0.15

By question

Sorted by discrimination, lowest first
#QuestionCorrect Discrim.Distribution
21Cotton overalls provide adequate arc-flash protection. 96%0.04
14Match each glove class to its maximum working voltage. 84%0.29
7Which sequence correctly describes the first three steps… 71%0.42
3Identify the arc-flash boundary on the diagram shown. 58%0.51

On screen first, exported second

Crystal produced a document. This produces a view you can sort and drill into, with PDF and Excel as exports rather than the only output.

Same numbers as before

The queries are the recovered originals, including the scratch-table pre-computation, so figures reconcile exactly against the old reports during parallel running.

Severity is encoded

Discrimination is coloured on the same pass/warn/fail scale used everywhere else, so a weak item is visible without reading the number.

Lockdown client

The replacement for SecureTG. A Python desktop application wrapping the same web assessment — because a browser tab cannot disable Alt+Tab, and no design can pretend otherwise.

Riverside Assessment Client — lockedKiosk
● Secure mode active Riverside Technical College
WS-LAB4-07 · verified

Ready to begin

This workstation is locked for examination. Task switching, copying and screen capture are disabled until you finish.

✓ Workstation identity verified
✓ Task switching and copy disabled
✓ Single display detected
✕ Screen-sharing software detected — close Zoom to continue

What is honestly enforceable

Task keys, taskbar, copy/paste and screen capture are blocked by the same Win32 low-level keyboard hook the current C++ client uses — reimplemented in Python. Nothing is claimed that the OS cannot deliver.

Checks name the fix

The current client refuses to start with a bare message box. Each check here says what is wrong and what to do about it.

Real workstation identity

The device line is signed per machine, replacing the fixed shared secret that any HTTP client could present. The server records which kiosk an attempt came from.