Central learning hub
Students can access learning modules and presentation material from one browser-based location.
Case study · Responsive learning web application
CSCS Mock Test and Student Learning Hub.
A browser-based revision tool that makes learning presentations, practice questions, feedback and full mock exams available to students wherever they are studying.
Project overview
Revision material and mock exams in one accessible student hub.
This project was created so students could access Health & Safety learning presentations and practise mock-test questions from wherever they were studying, rather than depending on a particular classroom, computer or location.
The hub brings daily learning modules, presentation access, topic tests and comprehensive mock exams into one focused application. It provides a clear route from learning material to practice, feedback and final results.
Try the Student Hub ↗The problem and solution
Built to support study, repetition and feedback.
Daily study modules
Health & Safety topics are arranged into a clear study sequence, including accidents, hazards, fire safety and COSHH.
Practice by topic
Each learning area can be paired with a mock test so students can move from reviewing material to practising it.
Full mock exams
Several comprehensive mock-exam sets give students the opportunity to test their knowledge under an exam-style flow.
Learning feedback
Correct and incorrect answer states, together with explanations, help students understand why an answer is right.
Device flexibility
The responsive interface makes the hub available on desktop, tablet and smaller mobile screens.
Student journey
From presentation to result, without leaving the hub.
01 / LEARN
Select a module
The student opens the Student Hub, chooses a daily learning topic and accesses the associated presentation material.
02 / PRACTISE
Take a mock test
The student starts a topic test or a full exam, selects answers and moves through numbered questions using the navigation panel.
03 / REVIEW
Understand the result
The application shows answer feedback, explanations, progress states and a final percentage result with options to review or restart.
Project screens
A responsive hub and complete mock-exam flow.
The supplied screens show the module hub, an exam interface on desktop and mobile, question states, answer explanations, final scoring and a mobile PageSpeed Insights result.
Development focus
An application designed around a practical learning workflow.
Content organisation
Structured the hub around daily modules, presentations, topic-based tests and final preparation papers so students could identify their next task quickly.
Exam question flow
Built the interface around a focused question area, answer selection, back and next controls, and a numbered navigation panel.
Progress states
Used visual states to distinguish unanswered questions, current questions and answered question outcomes during review.
Feedback and explanations
Presented correct and incorrect answer feedback with supporting explanations, allowing the mock test to reinforce learning as well as measure it.
Scoring and results
Created an end-of-exam result state with percentage, score, pass/fail outcome, review options and a path to restart the exam.
Responsive interface
Adapted the application for smaller screens so learners could access study material and mock tests beyond a traditional desktop setup.
Application flow
A simple loop for repeated revision.
The Student Hub was designed to make it straightforward to revise a topic, practise it and learn from the outcome before trying again.
01
Open the hub
The learner chooses a daily Health & Safety module, a final preparation paper or another available mock test.
02
Access study material
The learner views the related presentation before or alongside taking a practice test.
03
Answer and navigate
The learner chooses an answer and moves through the question set with visible numbered navigation.
04
Review and repeat
Feedback and scoring identify areas for further revision; the learner can review answers, restart or choose another test.
Current captured performance evidence
A strong mobile test result for the Student Hub.
The supplied PageSpeed Insights screenshot for iscru.uk/cscs/hub.html shows mobile Performance 100, Accessibility 100, Best Practices 100 and SEO 91 in the displayed test.
100Mobile Performance score shown in the supplied PageSpeed Insights capture. The same capture reports FCP 0.8 s, LCP 0.8 s, TBT 0 ms, CLS 0 and Speed Index 0.8 s.Project notes
What this learning application was built to do.
The project connects study material, questions, feedback and assessment results in a single browser-based student experience.
What could students access through the hub?
The hub provides access to learning modules, presentation material, topic mock tests, final exam preparation sets and Highfield mock tests shown in the supplied interface.
Why include presentations and tests together?
The arrangement supports a natural study process: access the relevant material, test understanding, review feedback and repeat practice where needed.
How did the mock exams support learning?
The exam screens include question navigation, answer states, correct or incorrect feedback, explanations and an end-of-test result with review and restart actions.
Was it designed for mobile devices?
Yes. The supplied small-device screen demonstrates a responsive exam interface intended to make revision and practice available across device sizes.
What does the PageSpeed result mean?
It is a captured mobile PageSpeed Insights result for the displayed URL. Actual results can vary depending on device, network, server conditions, browser versions and future application changes.
See the working project
Open the Student Hub and explore the application.
View the learning modules, mock-test structure and responsive interface in the live project.