This article goes deeper into the practice engine behind the demo. It explains how one HTML file can load many exam banks through query strings, why the JSON contract matters, how submit and next behavior becomes a learning loop, and how mobile layout choices change user trust. The focus is practical engineering discipline: simple state, visible feedback, reusable data, and prompts that produce maintainable behavior.
Purpose: This platform serves as an independent project constructed exclusively for the advancement of educational exploration and dedicated artificial intelligence research. It aims to foster a deeper understanding of modern technology without any external influence. Users can utilize this secure environment to study complex systems, test innovative ideas, and learn safely.
Non-Commercial: There is absolutely no underlying business model associated with this independent project. It is strictly not intended to generate financial revenue, monetary profit, or any tangible commercial value. Our core focus remains purely on academic development, ensuring that access remains completely free from hidden costs, corporate sponsorships, or advertising schemes.
No Guarantees: Because this platform operates as an educational tool utilizing experimental artificial intelligence, generated outputs may occasionally be inaccurate, misleading, or entirely incomplete. All provided content is strictly offered on an as is basis, completely without any express or implied warranties, guarantees of factual correctness, or promises regarding overall reliability whatsoever.
Part 1: Design The Practice Engine Around URL State This section explains how exam, chapter, and question query parameters make every practice state shareable, testable, and easy to debug without a backend or account system.
Part 2: Use One JSON Shape For Many Exams This section explores the reusable exam-bank schema and why consistent fields let one renderer support data, ML, networking, cloud operations, FSI, and AI development practice sets.
Part 3: Make Submit Feedback The Learning Loop This section breaks down the answer-checking pattern: selected answers, sorted correct answers, result text, per-option explanations, and no distracting red or green effects.
Part 4: Treat Mobile Buttons As Product Quality This section shows why larger mobile question, submit, and next buttons matter, and how small responsive changes can make the demo feel usable instead of merely complete.
Part 5: Debug With Contracts, Not Guesswork This section turns common vibe-coding errors into checks: failed fetches, missing JSON files, inconsistent answers, bad query strings, and page states that need predictable fallbacks.
Make a question screen that can be shared, reloaded, bookmarked, debugged, and opened directly from a marketing page.
The prompt said the URL query string should include the exam name, chapter, and question, and the page should go to the related question.practice-room.html reads exam, chapter, and question from URLSearchParams. It derives the JSON filename, fetches it, finds the requested chapter and question, renders the page, and updates the URL on navigation.
The URL contract is the smallest possible routing system. It creates deep links without a router, server, database, or authentication layer.
Let many exam topics use the same renderer by enforcing one stable content shape.
The prompt repeatedly said to follow aws_certified_data_exam_questions.json as the template when adding new practice sets.All exam banks expose chapters and questions with options, answers, and explanations. That lets the UI support data, machine learning, networking, cloud operations, FSI trading, generative AI, and AI development banks.
Exam-bank inventory from the folder:
Turn a simple quiz into a learning experience by showing why each option is right or wrong after submission.
The prompt asked for submit to show correct and wrong answer explanation and explicitly said no red or green UI effect was needed.The implementation sorts selected answers and correct answers, compares them, prints the result, prints the correct answer, and then renders one explanation block per option.
This is important for vibe coding because it stops the AI from over-designing. The requested behavior was not a gamified scoreboard. It was a study room. The UI should serve recall and review.
Make the practice room usable on phones, where many builders will study between meetings, on transit, or during quick review sessions.
The prompt asked for mobile layout with the question and answer area on top, the question list below, larger question buttons, and larger submit and next buttons.The CSS uses media queries to change layout order, increase button hit areas, and keep the question list usable when the screen narrows.
A practice product fails if users mis-tap answers. A larger button is not cosmetic; it protects attention.
Make failures explain themselves by validating assumptions at the boundary between HTML, URL, and JSON.
The build asked for direct JSON loading by query string and later added many exam filenames. That means typos and missing files are the likely failure mode.The player catches load failures and shows a clear message asking the user to check the exam query parameter and JSON file.
The debugging lesson is simple: if the AI creates a link, the next prompt should verify the file behind the link. Vibe coding needs a validation reflex.
The practice player needed shareable links that open a specific exam, chapter, and question without server routing.
Make every learning state addressable from a URL.
Use exam, chapter, and question query parameters to go to the related question.The page reads URLSearchParams, resolves the JSON file, finds the chapter, and highlights the current question.
The page reads URLSearchParams, resolves the JSON file, finds the chapter, and highlights the current question. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For URL state, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The app loads static JSON files directly from the same folder. That keeps deployment simple but makes filenames important.
Load many exam banks through one player without bundling or backend code.
HTML page load the JSON of URL query string.The player derives the filename from the exam parameter and fetches it before rendering.
The player derives the filename from the exam parameter and fetches it before rendering. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For JSON loading, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
Single-choice and multi-select questions both appear in AWS-style practice material.
Use one answer-checking path for radio buttons and checkboxes.
Submit should show correct and wrong answer explanation.The code collects selected inputs, sorts them, compares them with the sorted answer array, and prints a result.
The code collects selected inputs, sorts them, compares them with the sorted answer array, and prints a result. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For answer checking, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
A multiple-answer item should not need a separate data model from a single-answer item.
Let answer count determine input type while preserving the same rendering flow.
A multiple-choice item has one key; a select-two item has multiple keys.The renderer uses radio inputs when the answer array has one value and checkboxes when it has more than one.
The renderer uses radio inputs when the answer array has one value and checkboxes when it has more than one. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For multi-select logic, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The learning value is in the rationale, not only the score.
Show feedback for every option after submit.
When user clicks submit, show correct and wrong answer explanation without red or green UI effect.The result box lists selected state, answer state, and explanation text for each option.
The result box lists selected state, answer state, and explanation text for each option. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For explanation rendering, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
Large exam banks have multiple chapters and hundreds of questions, so navigation must remain simple.
Render chapter groups and question buttons from the JSON structure.
Left area shows all chapters and questions horizontally.The question list groups buttons by chapter and highlights the current question.
The question list groups buttons by chapter and highlights the current question. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For chapter navigation, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
A static player fails mainly when a query string points to a missing JSON file or malformed content.
Make the failure obvious to the person testing links.
Please check exam query parameter and JSON file.The catch block changes the title, shows the error message, and displays a clear empty-state instruction.
The catch block changes the title, shows the error message, and displays a clear empty-state instruction. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For error states, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The same renderer supports Data, ML, Networking, Cloud Operations, FSI, Generative AI, and AI Development practice sets.
Protect reuse by keeping every bank aligned to the same fields.
Follow aws_certified_data_exam_questions.json as template.New banks became content additions rather than code additions.
New banks became content additions rather than code additions. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For data contract reuse, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
If a learner moves to a new question after submitting, stale feedback can confuse the next answer.
Clear result state whenever navigation changes.
Next should go to next question and show the new question cleanly.The player hides and clears the result box when moving between questions.
The player hides and clears the result box when moving between questions. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For result reset, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
A practice room needs a fast path through questions without forcing users back to the list.
Advance within a chapter, then move to the first question of the next chapter.
Next: go to next question.The goNext function increments the question index or advances chapter index when the current chapter ends.
The goNext function increments the question index or advances chapter index when the current chapter ends. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For next behavior, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The desktop prompt separated navigation from answering: left for questions, right for the active item.
Use screen width to reduce cognitive switching for desktop learners.
Desktop page layout: left list of questions button area; right question and answer select area.The page grid gives a stable sidebar and a larger content panel.
The page grid gives a stable sidebar and a larger content panel. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For desktop layout, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
On mobile, a sidebar-first layout would force learners past navigation before seeing the question.
Reorder the page so the current question appears first.
Mobile page layout: top question and answer select area, down list of questions button area.CSS order rules put the right panel above the left panel on smaller screens.
CSS order rules put the right panel above the left panel on smaller screens. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For mobile layout, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
Tiny numbered buttons are frustrating on phones, especially when a bank has many questions.
Improve tap accuracy for mobile review sessions.
Mobile version: list of question button larger button size.The mobile media query increases question button width, height, padding, and font size.
The mobile media query increases question button width, height, padding, and font size. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For question button sizing, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
Submit and next are the core interaction buttons. If they feel small, the whole app feels unfinished.
Make primary actions comfortable on mobile.
Mobile version: submit, next button larger button size.The action buttons receive larger min-height, padding, and font size on mobile.
The action buttons receive larger min-height, padding, and font size on mobile. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For submit and next sizing, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
Options need enough spacing for multi-line AWS scenario answers.
Render each option as a label so clicking text selects the input.
Responses are possible answers; options should be similar in length and complexity.Each option uses a label wrapper with input and text, improving accessibility and click behavior.
Each option uses a label wrapper with input and text, improving accessibility and click behavior. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For option rendering, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
A learner should be able to share the current question after clicking through the app.
Keep browser URL synchronized with app state.
When user clicks a question, go to related question.The updateQueryString function writes exam, chapter, and question into the current URL.
The updateQueryString function writes exam, chapter, and question into the current URL. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For query update, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The app only needs fetch, DOM creation, state, and a few event listeners.
Avoid a framework until the interaction model demands it.
Create a simple dark-mode page without decoration.The practice room stays readable as one HTML file.
The practice room stays readable as one HTML file. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For no framework decision, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The question guide says distractors must be plausible and rationales must prove the key.
Make content review part of the engineering workflow.
Follow question guide and upgrade practice sets to professional level.The JSON structure preserves option-level explanations that can be audited later.
The JSON structure preserves option-level explanations that can be audited later. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For content quality gate, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
Every landing-page card depends on a matching practice-room URL.
Treat each card as a test case for the player.
Add exam card with link exam_name&chapter=1&question=1.The library became a set of ready-made deep links into the app.
The library became a set of ready-made deep links into the app. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For public link testing, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.
The practice player owns learning behavior; the landing page owns discovery.
Keep responsibilities separated so changes stay simple.
Use index.html for catalog and practice-room.html for questions.The system can grow the catalog without touching answer checking, and improve the player without rewriting marketing copy.
The system can grow the catalog without touching answer checking, and improve the player without rewriting marketing copy. This is the part a reviewer can check directly. The field note should stay connected to that evidence instead of drifting into generic advice about vibe coding.
For learning loop ownership, confirm three things: the background describes a real project pressure, the goal names the intended behavior, and the result points to something visible in the files or browser. If one of those three pieces is missing, rewrite the note before publishing.