Full-stack Engineer Assessment
Congratulations on moving to the next round of the SR1 technical assessment process! 🎉
This assessment is designed to help us understand how you approach practical web, debugging, API inspection, and user experience challenges.
The questions below are intentionally based on real-world tasks you may encounter while supporting educational technology, student-facing platforms, websites, and integrations. You are encouraged to use browser developer tools, documentation, online resources, and AI tools where appropriate. However, you should be able to explain your process and the decisions you made.
Please complete each question carefully and submit your responses in the form below. We are not only evaluating whether you arrive at the correct answer, but also how clearly you reason, troubleshoot, communicate, and design for students and community members.
Questions
1. The question is designed to assess your ability to use browser developer tools to inspect page structure, locate elements, and identify styling details from DOM/CSS.
A. Below is an image taken directly from our website. An exact copy of this image has been hidden somewhere on this assessment page. Although it is not visible on the page, it still exists in the page structure. Can you locate the hidden image and submit the following values associated with it?
Submit:
-
left pixel value
-
top pixel value
B. Below is another element from our website. Can you find it on sr1tech.org, inspect the element and identify its background color?
Submit the background color as a hex code.
2. This question is designed to assess your ability to read, debug, and reason through JavaScript code. The snippet below is intended to generate a formatted student session summary, but it currently contains multiple issues.
Your task is to:
-
Identify and fix issues in the code
-
Run the corrected code
Submit:
-
The final console output
-
The final code
-
A brief explanation of the issues you fixed
3. This question is designed to assess your ability to inspect network activity, locate an API response, and read a structured JSON payload.
When this page loads, it automatically makes a request to a mock student learning profile API named:
studentLearningProfile
The response includes mock student information from Salesforce and course enrollment details from Moodle LMS. Your task is to:
-
Locate the API request named studentLearningProfile
-
Inspect the JSON response payload
-
Find the course that the student has finished
Submit:
-
The display_code for the completed course
-
The JSON path where you found it – assume the full response object is accessible as response (e.g., response.student.first_name)
4. This question is designed to assess your ability to design a thoughtful user experience and explain your technical decisions clearly.
Choose one of the options below and design for high-school students learning programming (or any STEM related subjects) as the targeted audience:
Option A: Educational loading screen
Imagine a student is trying to open a video lesson in one of our online courses, but the video takes 20 seconds to load (which hopefully never happens in real life but for the sake of creative options to deal with it, let's pretend it does). Instead of showing a blank spinner or generic loading message, design a loading screen that uses those 20 seconds to teach the student something small but meaningful.
Option B: Helpful error loading page
Imagine a student tries to open a video lesson, but the video fails to load.
Design an error page that is clear, helpful, and student-friendly. It should explain what happened and give the student useful next steps.
Submission Guidelines:
-
You may use any format or technology you prefer, as long as your submission can be viewed through a link.
Examples include: Figma prototype, Plain HTML/CSS/JS, React, Angular, Vue, CodePen, StackBiltz, GitHub Pages, any other web-based technologies -
Your submission should be appropriate for K-12 students, clear and easy to understand
-
We encourage creativity. Feel free to experiment with animations, illustrations, storytelling, interactive elements, and playful programming/STEM inspired visuals.
-
Scoring rubric (100 points):
-
User experience and creativity (25) - Thoughtfulness of the overall experience, originality, creativity
-
STEM / educational relevance (20) - Effectiveness in incorporating programming/STEM concepts into the experience
-
Visual design (15) - Overall visual quality, layout, consistency, readability
-
Accessibility and inclusivity (15) - Consideration for accessibility, clarity of messaging, readable contrast, and student-friendly design choices
-
Technical implementation (15) - Quality and functionality of the implementation, including responsiveness
-
Explanation and communication (10) - Ability to clearly explain design decisions, technical choices, and how the prototype works
-
Submit:
-
A link to your design/prototype/page
-
If your prototype involves writing code, a GitHub repository link
-
A brief explanation of your design choices and how your solution works