Example Task

Here is an example task! Please go through the task and ensure that you thoroughly understand every
answer as the next part of the course is a graded assessment.

Note: Your justifications should be more precise than the ones in the example

Evaluate the response for a provided prompt

Read the instructions carefully before continuing.

Read-only

You will receive a prompt that meets the following characteristics:

Coding Language: HTML

Core Category (L0): Application Development

Main Category (L1): Web Development

Domain (L2): Front-end Development

Main Intent Coverage: Code Edit - Corrective (e.g. repair, debugging)

Complexity: Medium

Provide a prompt related to HTML, under the category of The overarching discipline encompasses the
design, creation, testing, and deployment of software applications across various platforms and
purposes, utilizing diverse programming languages, frameworks, and tools to meet specific user needs
and functionalities and can be deployed across different devices and environments., domain The
practice of optimizing web applications to improve load times, responsiveness, and resource efficiency
for better user experience and search engine optimization..

, intent coverage Code Edit - Corrective (e.g. repair, debugging).

Consider a prompt that requires a model to be resolved. It must challenge it.

Use at least one of the following libraries/frameworks according to your programming language:
Node.js, ASP.NET, React, Angular, Vue.js, Spring, Hibernate, Django, Flask, Ruby on Rails, Sass, Less,
jQuery, AngularJS, Bootstrap

Remember the following definitions to get context about the prompt:

Your task has a pair prompt/response related to Application Development, whose definition is:

The overarching discipline encompasses the design, creation, testing, and deployment of software
applications across various platforms and purposes, utilizing diverse programming languages,
frameworks, and tools to meet specific user needs and functionalities and can be deployed across
different devices and environments.

Your main category is Web Development, which is:

The process of designing, building, and maintaining websites, web applications, and web services using
programming languages such as HTML, CSS, JavaScript, and server-side languages like PHP, Python, and
Ruby. This includes front-end development (client-side), back-end development (server-side), devOps,
deployment, testing, tuning, architecture, as well as web frameworks, libraries, and databases.

Your main domain is Front-end Development, which definition is:

The practice of optimizing web applications to improve load times, responsiveness, and resource
efficiency for better user experience and search engine optimization.

Finally, according to the programming language assigned in this task, the following libraries/frameworks
could be used in your pair prompt/response (you can also see other libraries/frameworks that meet the
task programming language) :

Node.js, ASP.NET, React, Angular, Vue.js, Spring, Hibernate, Django, Flask, Ruby on Rails, Sass, Less,
jQuery, AngularJS, Bootstrap.

About complexity, first ask yourself What is a “front-line LLM”?

A front-line LLM is any publicly accessible, state-of-the-art model that engineering teams already rely on
for day-to-day coding help. Examples today include ChatGPT-4-turbo, Gemini 1.5 Pro, Claude 3 Opus,
etc.
When we write a prompt we need to ask ourselves “Does the prompt feel too easy for testing a front-
line LLM?”, we mean: Would one of these top models likely solve it fully, on the first try, with little-to-no
reasoning or iteration?

If the answer is “yes,” the prompt is too easy for this project.

In this project we MUST produce prompts of Medium/Hard complexity. Avoid the Easy category.

Use this table when deciding whether a prompt is Easy, Medium, or Hard. We only accept Medium or
Hard:

Level Experience Assumed Knowledge & Context Required Nature of a Valid Solution

Easy (✗ not allowed) Upper-undergraduate CS student. Only basic language syntax, trivial APIs,
or one self-contained function. No architectural background needed. Single-concept fix or toy script;
no tricky edge cases. A front-line LLM usually solves it in ≤ 1 answer.

Medium (✓ acceptable) Strong senior-undergrad / early-master’s developer. Familiarity with

standard algorithms or mainstream libraries (e.g., pandas, Spring, Express, SQL joins) plus several lines of
surrounding code or config. Requires decomposing the task into 2-3 logical steps, handling corner
cases, or refactoring non-trivial code. A front-line LLM may need iterative reasoning/tests, not a one-
shot reply.

Hard (✓ encouraged) Domain expert (5 + years) or specialist (e.g., ML ops, low-latency C++,
Kubernetes SRE). Deep API surface, multi-file context, precise performance/security constraints,
or production deployment details. Involves multiple inter-dependent sub-problems, subtle bugs, or
performance/security traps. Even a front-line LLM is likely to miss parts without careful prompting and
chain-of-thought. Extensive explanation is needed for a non-expert reader.

Rule of thumb:

If you would confidently give the prompt to ChatGPT-4-turbo and expect a perfect answer in one
response, mark it Easy (and reject it). Otherwise, craft it to meet Medium or Hard as per the table
above.

Visit the Complexity Section in the instructions, How to craft a Medium / Hard coding-prompt (one-turn
answerable, but challenging). https://docs.google.com/document/d/e/2PACX-
1vTXfzW93QLJIht7ITKMVhIz-L3I4FiTe_cTtecsvQr4mwyYQTra0t8_2eZdTlXbD77WR07O5sIGtPU3/pub
The pair prompt/response must meet the assigned Code Edit - Corrective (e.g. repair, debugging). Here
you have a table with the intent coverage definitions.

Task (Intent Coverage) Description/Example

Defect/Vulnerability Detection Discovering security vulnerabilities or potential weaknesses in code that

could be exploited, e.g. SQL injection vulnerability in a web application's login form

Code Generation/Completion Generating code from starter code, examples and/or with user’s
description.

Code Edit - Corrective [hardBreak][hardBreak](e.g. repair, debugging) Fixing errors or bugs in code,
assisting developers in debugging

Code Edit - Perfective[hardBreak][hardBreak](e.g. efficiency, readability or maintainability) Making

structural changes to code, such as refactoring or optimizing, to improve functionality or performance
e.g. refactors a loop into a more efficient algorithm

Code Edit - Adaptive[hardBreak][hardBreak](e.g. requirement switch) Modifying an existing function

to serve a new purpose or integrate into a different context while retaining its core functionality

Code Search Locating relevant code snippets from context and user description

Test Case Generation Generating test case for automatic regression testing or bug reproduction

Code Summarization Generating commit messages from two versions of code. Generating
documentation for a script.

Code Explanation Generating docstrings or comments. Explain the functionality, purpose and I/O
reasoning of a function/query/script/class

Code Review Reviewing code changes and evaluating whether they align with the intended
functionality, project and style requirements, efficiency etc.

Prompt

Write a prompt to start a chat session with the model.

Please review the below prompt:

Turn #1 - Prompt

Read-only
I have this blog HTML code, but when I try to load the images in this section on a mobile, the page
freezes, like loading eternally. Then, I tried to check if the accessibility is ok, testing a screen-reader, and
it is not working. Can you tell me why this is happening and how to correct it?

HTML

Collapse

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- Mobile viewport for responsive layouts -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<!-- Preconnect to Google Fonts for faster load -->

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- FontAwesome for icon bar -->

<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

<style>

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;
 line-height: 1.6;

header {

text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;

margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;

text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

.post h2 {

margin-bottom: 0.5rem;

.post .meta {

color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;
 }

.post img {

width: 100%;

height: auto;

display: block;

margin: 1rem 0;

.share-btn {

background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

</style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<!-- Icon bar: quick navigation -->

<div class="icon-bar" aria-label="Storyteller navigation">

<a href="/category/fantasy" title="Fantasy"><i class="fas fa-hat-wizard"></i></a>

<a href="/category/scifi" title="Sci-Fi" ><i class="fas fa-rocket"></i></a>

<a href="/category/poetry" title="Poetry" ><i class="fas fa-pen-nib"></i></a>

<a href="/category/tutorial" title="Tutorials"><i class="fas fa-chalkboard-teacher"></i></a>

<a href="/rss" title="Subscribe"><i class="fas fa-rss"></i></a>

</div>

<!-- Post: The Enchanted Forest -->

<section class="post">

<h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<!-- Responsive image with srcset & sizes -->

<img

src="forest-small.jpg"

srcset="

forest-small.jpg 400w,

forest-medium.jpg 800w,

forest-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Mystical forest path">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt"></i>

</button>

</section>

<!-- Post: Tales of the Starship -->

<section class="post">

<h2><a href="#" onclick="loadArticle(2); return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

<p>An odyssey through the silent void of space…</p>

 <!-- Responsive image with srcset & sizes -->

<img

src="starship-small.jpg"

srcset="

starship-small.jpg 400w,

starship-medium.jpg 800w,

starship-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Starship against nebula">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Container for full article content -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;"></div>

<script>

// Counter for the number of fetch calls

let fetchCount = 0;

async function loadArticle(id) {

try {

// Increment and log fetch count

fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

 // 1. Fetch the entire static JSON file

const res = await fetch('stories.json');

if (!res.ok) throw new Error(`HTTP ${res.status}`);

const stories = await res.json();

// 2. Find the story with the matching id

const article = stories.find(s => s.id === id);

if (!article) {

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Article not found.</p>`;

return;

// 3. Build HTML and inject

document.getElementById('article-content').innerHTML = `

<h2>${article.title}</h2>

<div class="meta">Published on ${article.published}</div>

${article.body}

`;

} catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data.</p>`;

// Load the first article on page load as an example

window.addEventListener('DOMContentLoaded', () => loadArticle(1));

 </script>

</body>

</html>

793 words

Answer the question below

Label your response according to the questions below.

Read-only

Category (L0) for Prompt

Before you rate the model responses, please answer if the L0 Application Development fits the prompt.

Yes

No

Category (L1) for Prompt

Before you rate the model responses, please answer if the L1 Web Development fits the prompt.

Yes

No

Category (L2) for Prompt

Before you rate the model responses, please answer if the L2 Front-end Development fits the prompt.
Yes

No

Intent Coverage for Prompt

Before you rate the model responses, please answer if the intent coverage Code Edit - Corrective (e.g.
repair, debugging) fits the prompt.

Yes

No

Generating the Responses

Read the instructions carefully before continuing.

Read-only

Now you will see four (4) model responses that must be evaluated following the rubric related to the L1
domain.

Evaluation Rubrics

Read the instructions carefully before continuing.

Read-only

You will use this rubric to evaluate the response.

We define a rating rubric by each domain, with general quality dimensions (correctness, completeness,
clarity & readability) and domain-specific dimensions.

The criteria for “correctness” should also be tailored to the specific intent types, e.g.:

Code generation: Did the code execute correctly, adhere to prompt and produce valid output under all
possible conditions?
Code edit (corrective, perfective, adaptive) : Did it correctly locate the root cause? Was the fix/edit
appropriate? Does the edit improve the code? Does it preserve behavior? Is the reasoning for the
change sound?

Test generation: Were edge cases, failure paths, and expected behavior included? Is test logic clean and
self-contained? Is it thorough?

Code explanation: Was the explanation accurate, conceptual, and helpful for the intended audience?

Rubric:

Web Development (Frontend & Fullstack)

Dimension 4 - Excellent 3 - Good 2 - Fair 1 - Poor

Correctness All implemented features function correctly across different scenarios and devices.
Debug fixes, edits, or explanations accurately resolve or describe the underlying issue. Application
works mostly as intended with minor issues that do not affect the overall experience. Fixes or
descriptions are mostly correct. Specific interactions or devices face occasional functionality issues. Fixes
are partial or only superficially relevant. Application fails to function correctly on most platforms. Critical
features are non-functional or break often. Fix or explanation is wrong or misleading.

Completeness All UI and functionality requirements are fully met, with comprehensive handling of
edge cases. Responses cover full context, dependencies, and behaviors. Key interactions are present,
but some functionalities or rationale could be expanded. Some key components, cases, or
insights are missing or incomplete. Minimal functionality or insight provided. Large gaps make the
result barely usable.

Clarity & Readability Code is well-structured with clean components and follows naming conventions.
Comments or explanations significantly enhance understanding. Overall clarity is maintained with minor
bloat or repetition. Comments and structure support comprehension. Readability is hindered due to
sparse comments, verbose or inconsistent structure. Code or explanation lacks organization and
clarity. Major refactoring or restructuring is needed.

Visual Appeal / UX Consistent styling and clean design enhance aesthetic appeal and usability. UI
follows modern web design and UX best practices. Design is generally appealing with small
inconsistencies. UX is solid with minor flaws in flow or layout. The UI is functional but lacks polish.
Layout or visual design appears default or underdeveloped. Poor styling choices impair usability.
Cluttered or broken UI makes interaction unpleasant or difficult.

Responsiveness Fully responsive design adapts cleanly to all screen sizes and devices. Includes mobile-
first practices and accessibility considerations. Mostly responsive with minor layout or styling issues on
some devices. Limited responsiveness with usability issues on tablets or mobile. Accessibility is
minimal. Lacks responsiveness, with layout and performance problems across non-desktop
devices.

Framework Proficiency Effective use of advanced framework features (e.g., routing, state management,
component lifecycles). Code reflects idiomatic use of chosen tools (React, Vue, etc.). General
framework usage is correct and efficient. May miss advanced optimizations or idioms. Limited
understanding; avoids advanced features or contains inefficient patterns. Heavy reliance on
boilerplate or plugins due to poor framework understanding. Misuses key patterns or APIs.

Turn #1 - Response

Review the model responses and click Continue

Read-only

Response 1

Okay, let's break down the potential issues and how to fix them.

Why the Page Might Freeze on Mobile (Image Loading)

Large FontAwesome JavaScript (all.js):

Problem: You're loading the entire FontAwesome library via JavaScript (all.js). This file is quite large (can
be over 1MB). On a slower mobile connection, downloading, parsing, and executing this JavaScript can
block rendering or make the page feel very sluggish, especially while other resources like images are also
trying to load. This is a very likely culprit for the perceived "eternal loading."

Solution: Use the CSS version of FontAwesome. It's generally much more performant as the browser
handles it more efficiently.

Unoptimized Images (Even the "Small" Ones):

Problem: While you're using srcset and sizes (which is great!), if forest-small.jpg (400w) and starship-
small.jpg (400w) are still large in file size (e.g., hundreds of KBs or >1MB), they can still take a significant
time to load on mobile, contributing to the freeze. The browser will try to download the image specified
by src first as a fallback, and then evaluate srcset.

Solution: Ensure your images are properly optimized for the web:

Use appropriate formats (JPEG for photos, PNG for graphics with transparency, WebP for better
compression if browser support is adequate for your audience).

Compress them aggressively (e.g., using tools like TinyPNG/TinyJPG, Squoosh, or image editing
software's "Save for Web" features). A "small" 400px wide image should ideally be well under 100KB,
often much less.

JavaScript Execution in loadArticle:

Problem: The loadArticle(1) call on DOMContentLoaded fetches stories.json and then manipulates the
DOM. If stories.json is very large or the article.body content it injects is complex (e.g., contains many
more images or heavy elements), this could also contribute to slowness, though it's less likely to cause
an "eternal freeze" for the initial images unless it's extremely heavy. The main issue here is fetching all
stories just to display one.

Solution (Minor optimization, less related to initial freeze): If stories.json becomes very large, consider
fetching only the specific article data if your backend/API supports it (e.g., fetch('stories/1.json')). For
now, with a small number of stories, it's less critical.

Why Screen Reader Accessibility is Not Working Well

Icon Bar Links Have No Accessible Text:

Problem: Your icon bar links look like this: <a href="/category/fantasy" title="Fantasy"><i class="fas fa-
hat-wizard"></i></a>.

The title attribute is often not read by screen readers for links if there's other content (or in this case, no
direct text content).

The <i> tag with a FontAwesome class provides a visual icon, but no text for a screen reader. Screen
readers will likely announce "link" and then silence, or "link, hat wizard icon" if FontAwesome JS does its
magic, which isn't ideal.

Solution: Provide accessible text for each link. You can do this in a few ways:

Add screen-reader-only text inside the link.

Use aria-label directly on the <a> tag.

Post Title Links (href="#" and onclick):

Problem: <h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

href="#" is a placeholder that often signifies a link that doesn't navigate in the traditional sense but
triggers JavaScript. Screen readers will announce "link, The Enchanted Forest, hash" or similar.

While functional for mouse users, it's not ideal. If JavaScript fails, the link goes nowhere useful (top of
the page).

Solution (Better Semantics & Accessibility):

Ideally, these links should point to a real URL for the article (e.g., /posts/the-enchanted-forest). Your
loadArticle JavaScript can then event.preventDefault() and load content dynamically for an SPA-like feel,
but it provides a graceful fallback.

If you must keep it as a JS-only trigger, consider using a <button> styled as a link, or add role="button" to
the <a> tag to better signify its action. However, for a post title, a true link is semantically more correct.
For now, let's focus on the immediate screen reader improvements.

Missing aria-hidden="true" on purely decorative icons:

Problem: While your share buttons are good, for the icon bar, if you add accessible text (e.g. via aria-
label on the <a>), the icon itself becomes decorative.

Solution: Add aria-hidden="true" to the <i> tags within links if the link itself has an aria-label or screen-
reader-only text. This prevents the screen reader from redundantly announcing the icon if it has a
default accessible name from FontAwesome.

Dynamic Content Not Announced:

Problem: When loadArticle injects content into <div id="article-content">, screen readers might not
automatically announce this new content to the user.

Solution: Use ARIA live regions. Add aria-live="polite" to the #article-content div so that changes to its
content are announced by screen readers.

Corrected Code (with Explanations):

HTML

Collapse

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- **CORRECTION 1: Use FontAwesome CSS for better performance** -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/

all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa
6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Remove the defer script tag for FontAwesome JS -->

<!-- <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> -->

<style>

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;

line-height: 1.6;

header {

text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;
 margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;

text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

.post h2 {

margin-bottom: 0.5rem;

.post .meta {

color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;

.post img {

width: 100%;

height: auto; /* Maintain aspect ratio */

display: block;

margin: 1rem 0;

.share-btn {
 background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

/* **CORRECTION 2: Style for screen-reader-only text** */

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border-width: 0;

</style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<div class="icon-bar" role="navigation" aria-label="Storyteller navigation">

<!-- **CORRECTION 3: Make icon links accessible** -->

 <a href="/category/fantasy" aria-label="Fantasy category">

<i class="fas fa-hat-wizard" aria-hidden="true"></i>

<!-- Alternative: <span class="sr-only">Fantasy</span> -->

</a>

<a href="/category/scifi" aria-label="Sci-Fi category">

<i class="fas fa-rocket" aria-hidden="true"></i>

</a>

<a href="/category/poetry" aria-label="Poetry category">

<i class="fas fa-pen-nib" aria-hidden="true"></i>

</a>

<a href="/category/tutorial" aria-label="Tutorials category">

<i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>

</a>

<a href="/rss" aria-label="Subscribe to RSS feed">

<i class="fas fa-rss" aria-hidden="true"></i>

</a>

</div>

<main> <!-- Added main landmark for better page structure -->

<section class="post" aria-labelledby="post-title-1">

<!-- **CORRECTION 4: Consider better link targets, but keeping JS for now. Added aria-labelledby**
-->

<h2 id="post-title-1"><a href="/posts/enchanted-forest" onclick="loadArticle(1);

event.preventDefault(); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<img

src="forest-small.jpg"
 srcset="

forest-small.jpg 400w,

forest-medium.jpg 800w,

forest-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Mystical forest path"

loading="lazy" <!-- **CORRECTION 5: Add lazy loading for images** -->

>

<button class="share-btn" aria-label="Share The Enchanted Forest"> <!-- Made label more specific --
>

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<section class="post" aria-labelledby="post-title-2">

<h2 id="post-title-2"><a href="/posts/tales-starship" onclick="loadArticle(2); event.preventDefault();

return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

<p>An odyssey through the silent void of space…</p>

<img

src="starship-small.jpg"

srcset="

starship-small.jpg 400w,

starship-medium.jpg 800w,

starship-large.jpg 1200w

"
 sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Starship against nebula"

loading="lazy" <!-- **CORRECTION 5: Add lazy loading for images** -->

>

<button class="share-btn" aria-label="Share Tales of the Starship"> <!-- Made label more specific -->

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

</main>

<!-- **CORRECTION 6: Add aria-live for dynamic content** -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;" aria-live="polite" aria-

atomic="true"></div>

<script>

let fetchCount = 0;

async function loadArticle(id) {

// Clear previous article content immediately for better UX

const articleContentElement = document.getElementById('article-content');

articleContentElement.innerHTML = '<p>Loading article...</p>'; // Optional loading indicator

try {

fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

// **RECOMMENDATION:** For a production app with many stories,

// fetch only the specific article: e.g., `fetch(/api/stories/${id})`

 const res = await fetch('stories.json'); // Assuming stories.json is in the same directory or public
path

if (!res.ok) throw new Error(`HTTP ${res.status} - ${res.statusText}`);

const stories = await res.json();

const article = stories.find(s => s.id === id);

if (!article) {

articleContentElement.innerHTML =

`<p style="color:red;">Article not found.</p>`;

return;

articleContentElement.innerHTML = `

<article> <!-- Use article tag for semantic content -->

<h2>${article.title}</h2>

<div class="meta">Published on ${article.published}</div>

<div>${article.body}</div> <!-- Assuming article.body is HTML content -->

</article>

`;

// Optionally, focus the new content for keyboard users

// const firstFocusableElement = articleContentElement.querySelector('h2');

// if (firstFocusableElement) firstFocusableElement.focus();

} catch (err) {

console.error('Failed to load article:', err);

articleContentElement.innerHTML =

`<p style="color:red;">Could not load article data. Error: ${err.message}</p>`;

}
 // Load the first article on page load as an example

// Consider if this is always desired or if the user should click first

window.addEventListener('DOMContentLoaded', () => {

// You might not want to auto-load an article if the page is just a list of posts.

// If you do, ensure 'stories.json' is available and id 1 exists.

// loadArticle(1); // Uncomment if you want to auto-load the first article

});

// Add event listeners to post title links if you use the href + event.preventDefault() pattern

// This is cleaner than inline onclick handlers

document.querySelectorAll('.post h2 a').forEach(link => {

link.addEventListener('click', function(event) {

const articleIdAttr = this.getAttribute('onclick'); // Simple parsing for this example

// A better way would be data-article-id="1" on the link

if (articleIdAttr) {

const match = articleIdAttr.match(/loadArticle\((\d+)\)/);

if (match && match[1]) {

event.preventDefault(); // Prevent navigation if href is a real URL

loadArticle(parseInt(match[1]));

});

});

</script>

</body>

</html>

Explanation of Corrections and Key Changes:

FontAwesome CSS (Performance):

Removed <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>.

Added <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/

all.min.css" ... />. This is much lighter and faster to load.

.sr-only CSS Class (Accessibility):

Added a standard CSS class to visually hide text but keep it accessible to screen readers. This is an
alternative to aria-label for providing text inside links if you prefer.

Icon Bar Links (Accessibility):

Added aria-label="Descriptive text" to each <a> tag (e.g., aria-label="Fantasy category").

Added aria-hidden="true" to the <i> tags inside these links. Since the <a> now has an aria-label, the icon
is purely decorative and should be hidden from assistive technologies to avoid redundancy.

Added role="navigation" to the icon-bar div for better semantics.

Post Title Links & Section Labelling (Accessibility & Semantics):

Changed href="#" to example actual URLs like href="/posts/enchanted-forest".

Added event.preventDefault() to the onclick handler if you want to maintain the dynamic loading
behavior while having a real fallback URL.

Added id to <h2> and aria-labelledby to the section.post to associate the heading with its section,
improving screen reader navigation.

Wrapped the main content in <main> for better landmark navigation.

loading="lazy" for Images (Performance):

Added loading="lazy" to your <img> tags. Modern browsers will defer loading these images until they
are close to entering the viewport, which can significantly improve initial page load time and reduce
data usage, especially on mobile.

ARIA Live Region for Dynamic Content (Accessibility):

Added aria-live="polite" and aria-atomic="true" to <div id="article-content">.

aria-live="polite": Tells screen readers to announce changes to this region when the user is idle.

aria-atomic="true": Tells screen readers to announce the entire content of the region when it changes,
not just the parts that were updated. This is usually better for article content.

JavaScript Enhancements:

The loadArticle function now has a basic loading message.

Error handling in fetch is slightly more informative.

The content injected now uses an <article> tag for better semantics.

Important: If stories.json is not in the same directory as your HTML file when testing locally,
fetch('stories.json') will fail. Ensure the path is correct or use an absolute path if it's served from a
specific public directory (e.g., fetch('/data/stories.json')).

Modified the DOMContentLoaded listener to be more explicit about not auto-loading an article unless
intended.

Added a more robust way to attach event listeners to post title links rather than using inline onclick. This
example still parses the onclick attribute, but using data-article-id attributes on the links would be
cleaner.

To Do For You (Regarding Freezing):

CRITICAL: Optimize your actual image files (forest-small.jpg, starship-small.jpg, etc.). Make sure they are
small in file size for their dimensions. This, combined with using FontAwesome CSS, will likely resolve the
freezing.

Verify stories.json path: Make sure fetch('stories.json') can actually find your JSON file. Open your
browser's developer console (usually F12) and check the "Network" tab for any 404 errors when
loadArticle runs. Create a simple stories.json file for testing if you don't have one, e.g.:

JSON

"id": 1,
 "title": "The Enchanted Forest (Full Article)",

"published": "May 20, 2025",

"body": "<p>This is the full story of the enchanted forest. It was a dark and stormy night...</p><img
src='forest-large.jpg' alt='Large view of the mystical forest path' style='width:100%; height:auto;'/>"

},

"id": 2,

"title": "Tales of the Starship (Full Article)",

"published": "May 15, 2025",

"body": "<p>The starship Voyager drifted silently. Captain Eva Rostova gazed out at the swirling
nebula...</p><img src='starship-large.jpg' alt='Detailed view of starship against nebula'
style='width:100%; height:auto;'/>"

By implementing these changes, your blog should be significantly more performant on mobile and much
more accessible to screen reader users.

Response 2

Step-by-step analysis of the problem:

Page Freezing on Mobile: The page freezing issue on mobile could be due to several factors such as large
image sizes, excessive JavaScript execution, or other resource-intensive tasks. In this code, one potential
cause is the large image sizes used in the srcset attribute of the img tags.

Screen Reader Not Working: The screen reader issue could be related to the accessibility attributes used
in the HTML. In this code, some accessibility attributes are missing or not properly used.

Issues with the Given Code:

Large Image Sizes: The srcset attribute is used to specify different image sizes for different screen sizes.
However, the image sizes used (400w, 800w, 1200w) might still be too large for mobile devices, causing
the page to freeze.

Missing loading Attribute: The loading attribute can be used to specify whether an image should be
loaded lazily or not. By default, images are loaded eagerly, which can cause performance issues on
mobile devices.
Insufficient Accessibility Attributes: Some accessibility attributes are missing or not properly used. For
example, the alt attribute is used, but the aria-label attribute is used for the share button, which is
correct. However, the aria-hidden attribute is used on the Font Awesome icon inside the share button,
which is correct but not consistently used.

Fixed Solution:

HTML

Collapse

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- Mobile viewport for responsive layouts -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<!-- Preconnect to Google Fonts for faster load -->

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- FontAwesome for icon bar -->

<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

<style>

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;

line-height: 1.6;
}

header {

text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;

margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;

text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

.post h2 {

margin-bottom: 0.5rem;

.post .meta {

color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;

}
 .post img {

width: 100%;

height: auto;

display: block;

margin: 1rem 0;

.share-btn {

background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

</style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<!-- Icon bar: quick navigation -->

<div class="icon-bar" aria-label="Storyteller navigation">

<a href="/category/fantasy" title="Fantasy"><i class="fas fa-hat-wizard" aria-hidden="true"></i></a>

<a href="/category/scifi" title="Sci-Fi" ><i class="fas fa-rocket" aria-hidden="true"></i></a>

<a href="/category/poetry" title="Poetry" ><i class="fas fa-pen-nib" aria-hidden="true"></i></a>

<a href="/category/tutorial" title="Tutorials"><i class="fas fa-chalkboard-teacher" aria-

hidden="true"></i></a>

<a href="/rss" title="Subscribe"><i class="fas fa-rss" aria-hidden="true"></i></a>

</div>

<!-- Post: The Enchanted Forest -->

<section class="post">

<h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<!-- Responsive image with srcset & sizes, and lazy loading -->

<img

src="forest-small.jpg"

srcset="

forest-small.jpg 400w,

forest-medium.jpg 800w,

forest-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Mystical forest path"

loading="lazy">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Post: Tales of the Starship -->

<section class="post">

<h2><a href="#" onclick="loadArticle(2); return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

 <p>An odyssey through the silent void of space…</p>

<!-- Responsive image with srcset & sizes, and lazy loading -->

<img

src="starship-small.jpg"

srcset="

starship-small.jpg 400w,

starship-medium.jpg 800w,

starship-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Starship against nebula"

loading="lazy">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Container for full article content -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;"></div>

<script>

// Counter for the number of fetch calls

let fetchCount = 0;

async function loadArticle(id) {

try {

// Increment and log fetch count

 fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

// 1. Fetch the entire static JSON file

const res = await fetch('stories.json');

if (!res.ok) throw new Error(`HTTP ${res.status}`);

const stories = await res.json();

// 2. Find the story with the matching id

const article = stories.find(s => s.id === id);

if (!article) {

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Article not found.</p>`;

return;

// 3. Build HTML and inject

document.getElementById('article-content').innerHTML = `

<h2>${article.title}</h2>

<div class="meta">Published on ${article.published}</div>

${article.body}

`;

} catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data.</p>`;

}
 // Load the first article on page load as an example

window.addEventListener('DOMContentLoaded', () => loadArticle(1));

</script>

</body>

</html>

Explanation of Changes:

Added loading="lazy" attribute: To lazy load images, which can improve performance on mobile devices.

Added aria-hidden="true" attribute: To Font Awesome icons to hide them from screen readers, as they
are decorative and not essential for understanding the content.

Tests and Example Uses:

Test the page on a mobile device to see if it no longer freezes.

Use a screen reader to test the accessibility of the page. The screen reader should now be able to read
the content correctly.

Response 3

Analysis of Blog HTML Code Issues

I've identified multiple issues that could be causing your mobile freeze problem and accessibility
challenges:

Issues and Solutions:

1. Missing Image Error Handling

Problem: The webpage tries to load images that may not exist (forest-small.jpg, etc.), which can cause
infinite loading if the images aren't available.

Solution: Add error handling for images:

JAVASCRIPT

// Add this to your script section

document.addEventListener('DOMContentLoaded', function() {

const images = document.querySelectorAll('img');

images.forEach(img => {

img.onerror = function() {

this.onerror = null;

this.src = 'placeholder.jpg'; // Fallback image

console.log('Image failed to load:', this.getAttribute('src'));

};

});

});

2. Accessibility Issues

Problem: Several accessibility issues with icon links and buttons.

Solution:

Add appropriate ARIA roles

Ensure all interactive elements are keyboard accessible

Fix missing alternative text

3. Initial Article Loading

Problem: The page tries to load an article when the content loads, but if stories.json doesn't exist or is
incorrect, it can freeze.

Solution: Add timeout and better error handling:

JAVASCRIPT

Collapse

async function loadArticle(id) {

try {
 // Set a timeout for fetch

const controller = new AbortController();

const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout

const res = await fetch('stories.json', {signal: controller.signal});

clearTimeout(timeoutId);

if (!res.ok) throw new Error(`HTTP ${res.status}`);

// Rest of your function...

} catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data: ${err.message}</p>`;

4. Lazy Loading Images

Problem: Loading all high-resolution images at once on mobile can cause performance issues.

Solution: Add loading="lazy" attribute to images:

HTML

<img

loading="lazy"

src="forest-small.jpg"

srcset="..."

sizes="..."

alt="Mystical forest path">

5. Missing Focus States

Problem: Interactive elements lack proper focus states for keyboard navigation.

Solution: Add CSS for focus states:

CSS

a:focus, button:focus {

outline: 2px solid #4d90fe;

outline-offset: 2px;

6. Font Awesome Icons Accessibility

Problem: Icon-only links need proper accessibility treatment.

Solution: The aria-hidden="true" attribute should be on all icons, and you should add descriptive text
visually hidden but available to screen readers:

CSS

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border-width: 0;

}
Then use:

HTML

<a href="/category/fantasy" title="Fantasy">

<i class="fas fa-hat-wizard" aria-hidden="true"></i>

<span class="sr-only">Fantasy stories</span>

</a>

These changes should resolve both the mobile freezing issues and improve accessibility for screen
readers.

Response 4

The code you've provided seems to be mostly correct, but there are a few potential issues that could be
causing the problems you're experiencing:

Images Loading Eternally: The issue with images loading eternally on mobile devices could be due to the
srcset and sizes attributes on the img tags. These attributes are used to provide different versions of an
image for different screen sizes, but they can sometimes cause issues if not implemented correctly.

To fix this, you can try removing the srcset and sizes attributes and just use the src attribute to load a
single version of the image. If you still want to use responsive images, make sure that the images are
correctly sized and compressed for web use.

Accessibility Issues: The accessibility issues you're experiencing could be due to the lack of alt text on
some of the icons. For example, the i tags inside the button elements do not have alt text, which could
cause issues for screen readers.

To fix this, you can add alt text to all icons, or use a different method to provide a text description of the
icon. You can also use ARIA attributes to provide more information about the icons and buttons.
Fetch API Issues: The Fetch API is used to load the stories.json file, but there is no error handling if the
file does not exist or cannot be loaded.

To fix this, you can add more robust error handling to the loadArticle function to handle cases where the
file does not exist or cannot be loaded.

Here is an updated version of the code with these issues fixed:

HTML

Collapse

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- Mobile viewport for responsive layouts -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<!-- Preconnect to Google Fonts for faster load -->

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- FontAwesome for icon bar -->

<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

<style>

body {
 font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;

line-height: 1.6;

header {

text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;

margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;

text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

.post h2 {

margin-bottom: 0.5rem;

.post .meta {
 color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;

.post img {

width: 100%;

height: auto;

display: block;

margin: 1rem 0;

.share-btn {

background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

</style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<!-- Icon bar: quick navigation -->

<div class="icon-bar" aria-label="Storyteller navigation">

<a href="/category/fantasy" title="Fantasy"><i class="fas fa-hat-wizard" aria-label="Fantasy"></i></a>

<a href="/category/scifi" title="Sci-Fi" ><i class="fas fa-rocket" aria-label="Sci-Fi"></i></a>

 <a href="/category/poetry" title="Poetry" ><i class="fas fa-pen-nib" aria-label="Poetry"></i></a>

<a href="/category/tutorial" title="Tutorials"><i class="fas fa-chalkboard-teacher" aria-

label="Tutorials"></i></a>

<a href="/rss" title="Subscribe"><i class="fas fa-rss" aria-label="Subscribe"></i></a>

</div>

<!-- Post: The Enchanted Forest -->

<section class="post">

<h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<!-- Responsive image with srcset & sizes -->

<img

src="forest-small.jpg"

alt="Mystical forest path">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Post: Tales of the Starship -->

<section class="post">

<h2><a href="#" onclick="loadArticle(2); return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

<p>An odyssey through the silent void of space…</p>

<!-- Responsive image with srcset & sizes -->

 <img

src="starship-small.jpg"

alt="Starship against nebula">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Container for full article content -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;"></div>

<script>

// Counter for the number of fetch calls

let fetchCount = 0;

async function loadArticle(id) {

try {

// Increment and log fetch count

fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

// 1. Fetch the entire static JSON file

const res = await fetch('stories.json');

if (!res.ok) {

throw new Error(`HTTP ${res.status}`);

const stories = await res.json();

 // 2. Find the story with the matching id

const article = stories.find(s => s.id === id);

if (!article) {

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Article not found.</p>`;

return;

// 3. Build HTML and inject

document.getElementById('article-content').innerHTML = `

<h2>${article.title}</h2>

<div class="meta">Published on ${article.published}</div>

${article.body}

`;

} catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data.</p>`;

// Load the first article on page load as an example

window.addEventListener('DOMContentLoaded', () => loadArticle(1));

</script>

</body>

</html>

I hope this updated code helps to fix the issues you're experiencing. Let me know if you have any further
questions or if there's anything else I can help with!
Continue

Model Failure

Please answer the questions below before continuing.

Read-only

Please confirm that at least one of the models failed. *

If NO, please go back to the prompt, edit the prompt, and re-try the four model responses.

Yes. I confirm at least one of the model responses failed.

Did Response 1 fail? *

Yes

No

In what ways did the model fail? (Select all that apply) *

Select a minimum of 1 choice; maximum of 4 choices

Correctness

Completeness

Clarity/Readability/Reasoning

Other related to specific domain dimensions

Brief Failure Explanation *

Provide a brief justification explaining what the failed model response is. Also, add the dimension that
failed and a brief justification.

No framework used or demonstrated; no idiomatic React/Vue/etc. patterns, only vanilla JS.

14 words

Did Response 2 fail? *

Yes

No

In what ways did the model fail? (Select all that apply) *

Select a minimum of 1 choice; maximum of 4 choices

Correctness

Completeness

Clarity/Readability/Reasoning

Other related to specific domain dimensions

Brief Failure Explanation *

Provide a brief justification explaining what the failed model response is. Also, add the dimension that
failed and a brief justification.

All dimensions present issues

4 words

Did Response 3 fail? *

Yes

No

In what ways did the model fail? (Select all that apply) *

Select a minimum of 1 choice; maximum of 4 choices

Correctness

Completeness

Clarity/Readability/Reasoning

Other related to specific domain dimensions

Brief Failure Explanation *

Provide a brief justification explaining what the failed model response is. Also, add the dimension that
failed and a brief justification.

Clarity & Readability is the only dimension with no issues.

9 words

Did Response 4 fail? *

Yes

No

In what ways did the model fail? (Select all that apply) *

Select a minimum of 1 choice; maximum of 4 choices

Correctness

Completeness

Clarity/Readability/Reasoning

Other related to specific domain dimensions

Brief Failure Explanation *

Provide a brief justification explaining what the failed model response is. Also, add the dimension that
failed and a brief justification.

Clarity & Readability is the only dimension with no issues.

9 words

Web Development Rubric Dimensions

Select the rating that you consider best fits the rubric dimension.

Read-only

Response 1

Read-only

Decrease

Increase
Okay, let's break down the potential issues and how to fix them.

Why the Page Might Freeze on Mobile (Image Loading)

Large FontAwesome JavaScript (all.js):

Problem: You're loading the entire FontAwesome library via JavaScript (all.js). This file is quite large (can
be over 1MB). On a slower mobile connection, downloading, parsing, and executing this JavaScript can
block rendering or make the page feel very sluggish, especially while other resources like images are also
trying to load. This is a very likely culprit for the perceived "eternal loading."

Solution: Use the CSS version of FontAwesome. It's generally much more performant as the browser
handles it more efficiently.

Unoptimized Images (Even the "Small" Ones):

Problem: While you're using srcset and sizes (which is great!), if forest-small.jpg (400w) and starship-
small.jpg (400w) are still large in file size (e.g., hundreds of KBs or >1MB), they can still take a significant
time to load on mobile, contributing to the freeze. The browser will try to download the image specified
by src first as a fallback, and then evaluate srcset.

Solution: Ensure your images are properly optimized for the web:

Use appropriate formats (JPEG for photos, PNG for graphics with transparency, WebP for better
compression if browser support is adequate for your audience).

Compress them aggressively (e.g., using tools like TinyPNG/TinyJPG, Squoosh, or image editing
software's "Save for Web" features). A "small" 400px wide image should ideally be well under 100KB,
often much less.

JavaScript Execution in loadArticle:

Problem: The loadArticle(1) call on DOMContentLoaded fetches stories.json and then manipulates the
DOM. If stories.json is very large or the article.body content it injects is complex (e.g., contains many
more images or heavy elements), this could also contribute to slowness, though it's less likely to cause
an "eternal freeze" for the initial images unless it's extremely heavy. The main issue here is fetching all
stories just to display one.
Solution (Minor optimization, less related to initial freeze): If stories.json becomes very large, consider
fetching only the specific article data if your backend/API supports it (e.g., fetch('stories/1.json')). For
now, with a small number of stories, it's less critical.

Why Screen Reader Accessibility is Not Working Well

Icon Bar Links Have No Accessible Text:

Problem: Your icon bar links look like this: <a href="/category/fantasy" title="Fantasy"><i class="fas fa-
hat-wizard"></i></a>.

The title attribute is often not read by screen readers for links if there's other content (or in this case, no
direct text content).

The <i> tag with a FontAwesome class provides a visual icon, but no text for a screen reader. Screen
readers will likely announce "link" and then silence, or "link, hat wizard icon" if FontAwesome JS does its
magic, which isn't ideal.

Solution: Provide accessible text for each link. You can do this in a few ways:

Add screen-reader-only text inside the link.

Use aria-label directly on the <a> tag.

Post Title Links (href="#" and onclick):

Problem: <h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

href="#" is a placeholder that often signifies a link that doesn't navigate in the traditional sense but
triggers JavaScript. Screen readers will announce "link, The Enchanted Forest, hash" or similar.

While functional for mouse users, it's not ideal. If JavaScript fails, the link goes nowhere useful (top of
the page).

Solution (Better Semantics & Accessibility):

Ideally, these links should point to a real URL for the article (e.g., /posts/the-enchanted-forest). Your
loadArticle JavaScript can then event.preventDefault() and load content dynamically for an SPA-like feel,
but it provides a graceful fallback.

If you must keep it as a JS-only trigger, consider using a <button> styled as a link, or add role="button" to
the <a> tag to better signify its action. However, for a post title, a true link is semantically more correct.
For now, let's focus on the immediate screen reader improvements.

Missing aria-hidden="true" on purely decorative icons:

Problem: While your share buttons are good, for the icon bar, if you add accessible text (e.g. via aria-
label on the <a>), the icon itself becomes decorative.

Solution: Add aria-hidden="true" to the <i> tags within links if the link itself has an aria-label or screen-
reader-only text. This prevents the screen reader from redundantly announcing the icon if it has a
default accessible name from FontAwesome.

Dynamic Content Not Announced:

Problem: When loadArticle injects content into <div id="article-content">, screen readers might not
automatically announce this new content to the user.

Solution: Use ARIA live regions. Add aria-live="polite" to the #article-content div so that changes to its
content are announced by screen readers.

Corrected Code (with Explanations):

HTML

Collapse

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- **CORRECTION 1: Use FontAwesome CSS for better performance** -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/

all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa
6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- Remove the defer script tag for FontAwesome JS -->

<!-- <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script> -->

<style>

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;

line-height: 1.6;

header {

text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;

margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;

text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

}
.post h2 {

margin-bottom: 0.5rem;

.post .meta {

color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;

.post img {

width: 100%;

height: auto; /* Maintain aspect ratio */

display: block;

margin: 1rem 0;

.share-btn {

background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

/* **CORRECTION 2: Style for screen-reader-only text** */

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;
 overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border-width: 0;

</style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<div class="icon-bar" role="navigation" aria-label="Storyteller navigation">

<!-- **CORRECTION 3: Make icon links accessible** -->

<a href="/category/fantasy" aria-label="Fantasy category">

<i class="fas fa-hat-wizard" aria-hidden="true"></i>

<!-- Alternative: <span class="sr-only">Fantasy</span> -->

</a>

<a href="/category/scifi" aria-label="Sci-Fi category">

<i class="fas fa-rocket" aria-hidden="true"></i>

</a>

<a href="/category/poetry" aria-label="Poetry category">

<i class="fas fa-pen-nib" aria-hidden="true"></i>

</a>

<a href="/category/tutorial" aria-label="Tutorials category">

<i class="fas fa-chalkboard-teacher" aria-hidden="true"></i>

</a>

<a href="/rss" aria-label="Subscribe to RSS feed">

 <i class="fas fa-rss" aria-hidden="true"></i>

</a>

</div>

<main> <!-- Added main landmark for better page structure -->

<section class="post" aria-labelledby="post-title-1">

<!-- **CORRECTION 4: Consider better link targets, but keeping JS for now. Added aria-labelledby**
-->

<h2 id="post-title-1"><a href="/posts/enchanted-forest" onclick="loadArticle(1);

event.preventDefault(); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<img

src="forest-small.jpg"

srcset="

forest-small.jpg 400w,

forest-medium.jpg 800w,

forest-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Mystical forest path"

loading="lazy" <!-- **CORRECTION 5: Add lazy loading for images** -->

>

<button class="share-btn" aria-label="Share The Enchanted Forest"> <!-- Made label more specific --
>

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>
 <section class="post" aria-labelledby="post-title-2">

<h2 id="post-title-2"><a href="/posts/tales-starship" onclick="loadArticle(2); event.preventDefault();

return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

<p>An odyssey through the silent void of space…</p>

<img

src="starship-small.jpg"

srcset="

starship-small.jpg 400w,

starship-medium.jpg 800w,

starship-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Starship against nebula"

loading="lazy" <!-- **CORRECTION 5: Add lazy loading for images** -->

>

<button class="share-btn" aria-label="Share Tales of the Starship"> <!-- Made label more specific -->

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

</main>

<!-- **CORRECTION 6: Add aria-live for dynamic content** -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;" aria-live="polite" aria-

atomic="true"></div>
 <script>

let fetchCount = 0;

async function loadArticle(id) {

// Clear previous article content immediately for better UX

const articleContentElement = document.getElementById('article-content');

articleContentElement.innerHTML = '<p>Loading article...</p>'; // Optional loading indicator

try {

fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

// **RECOMMENDATION:** For a production app with many stories,

// fetch only the specific article: e.g., `fetch(/api/stories/${id})`

const res = await fetch('stories.json'); // Assuming stories.json is in the same directory or public
path

if (!res.ok) throw new Error(`HTTP ${res.status} - ${res.statusText}`);

const stories = await res.json();

const article = stories.find(s => s.id === id);

if (!article) {

articleContentElement.innerHTML =

`<p style="color:red;">Article not found.</p>`;

return;

articleContentElement.innerHTML = `

<article> <!-- Use article tag for semantic content -->

<h2>${article.title}</h2>
 <div class="meta">Published on ${article.published}</div>

<div>${article.body}</div> <!-- Assuming article.body is HTML content -->

</article>

`;

// Optionally, focus the new content for keyboard users

// const firstFocusableElement = articleContentElement.querySelector('h2');

// if (firstFocusableElement) firstFocusableElement.focus();

} catch (err) {

console.error('Failed to load article:', err);

articleContentElement.innerHTML =

`<p style="color:red;">Could not load article data. Error: ${err.message}</p>`;

// Load the first article on page load as an example

// Consider if this is always desired or if the user should click first

window.addEventListener('DOMContentLoaded', () => {

// You might not want to auto-load an article if the page is just a list of posts.

// If you do, ensure 'stories.json' is available and id 1 exists.

// loadArticle(1); // Uncomment if you want to auto-load the first article

});

// Add event listeners to post title links if you use the href + event.preventDefault() pattern

// This is cleaner than inline onclick handlers

document.querySelectorAll('.post h2 a').forEach(link => {

link.addEventListener('click', function(event) {

const articleIdAttr = this.getAttribute('onclick'); // Simple parsing for this example

// A better way would be data-article-id="1" on the link

 if (articleIdAttr) {

const match = articleIdAttr.match(/loadArticle\((\d+)\)/);

if (match && match[1]) {

event.preventDefault(); // Prevent navigation if href is a real URL

loadArticle(parseInt(match[1]));

});

});

</script>

</body>

</html>

Explanation of Corrections and Key Changes:

FontAwesome CSS (Performance):

Removed <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>.

Added <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/

all.min.css" ... />. This is much lighter and faster to load.

.sr-only CSS Class (Accessibility):

Added a standard CSS class to visually hide text but keep it accessible to screen readers. This is an
alternative to aria-label for providing text inside links if you prefer.

Icon Bar Links (Accessibility):

Added aria-label="Descriptive text" to each <a> tag (e.g., aria-label="Fantasy category").

Added aria-hidden="true" to the <i> tags inside these links. Since the <a> now has an aria-label, the icon
is purely decorative and should be hidden from assistive technologies to avoid redundancy.

Added role="navigation" to the icon-bar div for better semantics.

Post Title Links & Section Labelling (Accessibility & Semantics):

Changed href="#" to example actual URLs like href="/posts/enchanted-forest".

Added event.preventDefault() to the onclick handler if you want to maintain the dynamic loading
behavior while having a real fallback URL.

Added id to <h2> and aria-labelledby to the section.post to associate the heading with its section,
improving screen reader navigation.

Wrapped the main content in <main> for better landmark navigation.

loading="lazy" for Images (Performance):

Added loading="lazy" to your <img> tags. Modern browsers will defer loading these images until they
are close to entering the viewport, which can significantly improve initial page load time and reduce
data usage, especially on mobile.

ARIA Live Region for Dynamic Content (Accessibility):

Added aria-live="polite" and aria-atomic="true" to <div id="article-content">.

aria-live="polite": Tells screen readers to announce changes to this region when the user is idle.

aria-atomic="true": Tells screen readers to announce the entire content of the region when it changes,
not just the parts that were updated. This is usually better for article content.

JavaScript Enhancements:

The loadArticle function now has a basic loading message.

Error handling in fetch is slightly more informative.

The content injected now uses an <article> tag for better semantics.

Important: If stories.json is not in the same directory as your HTML file when testing locally,
fetch('stories.json') will fail. Ensure the path is correct or use an absolute path if it's served from a
specific public directory (e.g., fetch('/data/stories.json')).

Modified the DOMContentLoaded listener to be more explicit about not auto-loading an article unless
intended.

Added a more robust way to attach event listeners to post title links rather than using inline onclick. This
example still parses the onclick attribute, but using data-article-id attributes on the links would be
cleaner.
To Do For You (Regarding Freezing):

CRITICAL: Optimize your actual image files (forest-small.jpg, starship-small.jpg, etc.). Make sure they are
small in file size for their dimensions. This, combined with using FontAwesome CSS, will likely resolve the
freezing.

Verify stories.json path: Make sure fetch('stories.json') can actually find your JSON file. Open your
browser's developer console (usually F12) and check the "Network" tab for any 404 errors when
loadArticle runs. Create a simple stories.json file for testing if you don't have one, e.g.:

JSON

"id": 1,

"title": "The Enchanted Forest (Full Article)",

"published": "May 20, 2025",

"body": "<p>This is the full story of the enchanted forest. It was a dark and stormy night...</p><img
src='forest-large.jpg' alt='Large view of the mystical forest path' style='width:100%; height:auto;'/>"

},

"id": 2,

"title": "Tales of the Starship (Full Article)",

"published": "May 15, 2025",

"body": "<p>The starship Voyager drifted silently. Captain Eva Rostova gazed out at the swirling
nebula...</p><img src='starship-large.jpg' alt='Detailed view of starship against nebula'
style='width:100%; height:auto;'/>"

By implementing these changes, your blog should be significantly more performant on mobile and much
more accessible to screen reader users.
2,540 words

Correctness

Poor

Fair

Good

Excellent

Correctness Explanation *

Please provide a brief description.

Diagnoses most issues accurately (FontAwesome, unoptimized images, ARIA), but overlooks potential
network-blocking by loading all stories.json and could mention specifying correct image paths more
clearly.

28 words

Completeness

Poor

Fair

Good

Excellent

Completeness Explanation *
Please provide a brief description.

Covers major performance and accessibility fixes, but misses finer points (e.g., CSS media-queries for
image breakpoints, fallback for no-JS).

22 words

Clarity & Readability

Poor

Fair

Good

Excellent
Clarity & Readability Explanation *

Please provide a brief description.

Explanations are thorough but overly verbose; mixing code and commentary makes it hard to scan key
changes quickly.

18 words

Visual Appeal / UX

N/A
Poor

Fair

Good

Excellent

Visual Appeal / UX Explanation *

Please provide a brief description.

Introduces lazy-loading and semantics, yet doesn’t address styling polish (e.g., loading indicators,
skeleton UIs) for better perceived performance.

21 words

Responsiveness

2
3

N/A

Poor

Fair

Good

Excellent

Responsiveness Explanation *

Please provide a brief description.

Adds loading="lazy" but doesn’t refine CSS breakpoints or optimize image delivery (e.g., use of WebP or
adaptive formats).

21 words

Framework Proficiency

0
1

N/A

Poor

Fair

Good

Excellent

Framework Proficiency Explanation *

Please provide a brief description.

No framework used or demonstrated; no idiomatic React/Vue/etc. patterns, only vanilla JS.

14 words
Response 2

Read-only

Decrease

Increase

Step-by-step analysis of the problem:

Page Freezing on Mobile: The page freezing issue on mobile could be due to several factors such as large
image sizes, excessive JavaScript execution, or other resource-intensive tasks. In this code, one potential
cause is the large image sizes used in the srcset attribute of the img tags.

Screen Reader Not Working: The screen reader issue could be related to the accessibility attributes used
in the HTML. In this code, some accessibility attributes are missing or not properly used.

Issues with the Given Code:

Large Image Sizes: The srcset attribute is used to specify different image sizes for different screen sizes.
However, the image sizes used (400w, 800w, 1200w) might still be too large for mobile devices, causing
the page to freeze.

Missing loading Attribute: The loading attribute can be used to specify whether an image should be
loaded lazily or not. By default, images are loaded eagerly, which can cause performance issues on
mobile devices.

Insufficient Accessibility Attributes: Some accessibility attributes are missing or not properly used. For
example, the alt attribute is used, but the aria-label attribute is used for the share button, which is
correct. However, the aria-hidden attribute is used on the Font Awesome icon inside the share button,
which is correct but not consistently used.

Fixed Solution:

HTML

Collapse

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- Mobile viewport for responsive layouts -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<!-- Preconnect to Google Fonts for faster load -->

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- FontAwesome for icon bar -->

<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

<style>

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;

line-height: 1.6;

header {

text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;

margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;
 text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

.post h2 {

margin-bottom: 0.5rem;

.post .meta {

color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;

.post img {

width: 100%;

height: auto;

display: block;

margin: 1rem 0;

.share-btn {

background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

}
 </style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<!-- Icon bar: quick navigation -->

<div class="icon-bar" aria-label="Storyteller navigation">

<a href="/category/fantasy" title="Fantasy"><i class="fas fa-hat-wizard" aria-hidden="true"></i></a>

<a href="/category/scifi" title="Sci-Fi" ><i class="fas fa-rocket" aria-hidden="true"></i></a>

<a href="/category/poetry" title="Poetry" ><i class="fas fa-pen-nib" aria-hidden="true"></i></a>

<a href="/category/tutorial" title="Tutorials"><i class="fas fa-chalkboard-teacher" aria-

hidden="true"></i></a>

<a href="/rss" title="Subscribe"><i class="fas fa-rss" aria-hidden="true"></i></a>

</div>

<!-- Post: The Enchanted Forest -->

<section class="post">

<h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<!-- Responsive image with srcset & sizes, and lazy loading -->

<img

src="forest-small.jpg"

srcset="

forest-small.jpg 400w,
 forest-medium.jpg 800w,

forest-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Mystical forest path"

loading="lazy">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Post: Tales of the Starship -->

<section class="post">

<h2><a href="#" onclick="loadArticle(2); return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

<p>An odyssey through the silent void of space…</p>

<!-- Responsive image with srcset & sizes, and lazy loading -->

<img

src="starship-small.jpg"

srcset="

starship-small.jpg 400w,

starship-medium.jpg 800w,

starship-large.jpg 1200w

"

sizes="(max-width:600px) 400px, (max-width:900px) 800px, 1200px"

alt="Starship against nebula"

loading="lazy">
 <button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Container for full article content -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;"></div>

<script>

// Counter for the number of fetch calls

let fetchCount = 0;

async function loadArticle(id) {

try {

// Increment and log fetch count

fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

// 1. Fetch the entire static JSON file

const res = await fetch('stories.json');

if (!res.ok) throw new Error(`HTTP ${res.status}`);

const stories = await res.json();

// 2. Find the story with the matching id

const article = stories.find(s => s.id === id);

if (!article) {

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Article not found.</p>`;

 return;

// 3. Build HTML and inject

document.getElementById('article-content').innerHTML = `

<h2>${article.title}</h2>

<div class="meta">Published on ${article.published}</div>

${article.body}

`;

} catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data.</p>`;

// Load the first article on page load as an example

window.addEventListener('DOMContentLoaded', () => loadArticle(1));

</script>

</body>

</html>

Explanation of Changes:

Added loading="lazy" attribute: To lazy load images, which can improve performance on mobile devices.

Added aria-hidden="true" attribute: To Font Awesome icons to hide them from screen readers, as they
are decorative and not essential for understanding the content.

Tests and Example Uses:

Test the page on a mobile device to see if it no longer freezes.

Use a screen reader to test the accessibility of the page. The screen reader should now be able to read
the content correctly.
1,061 words

Correctness

Poor

Fair

Good

Excellent

Correctness Explanation *

Please provide a brief description.

Adds loading="lazy" and aria-hidden, but fails to identify the primary freeze culprit (FontAwesome JS),
doesn’t optimize image assets, and leaves other accessibility gaps unaddressed.

27 words

Completeness

Poor

Fair

Good

Excellent

Completeness Explanation *
Please provide a brief description.

Only two fixes provided, lazy loading and decorative-icon hiding, while neglecting link semantics, ARIA
live regions, icon-bar labeling, script path issues, and general performance improvements.

27 words

Clarity & Readability

Poor

Fair

Good

Excellent
Clarity & Readability Explanation *

Please provide a brief description.

Response is brief and to the point, but too shallow; doesn’t clearly structure which issues remain or
prioritize fixes, leaving the reader unsure of next steps.

26 words

Visual Appeal / UX

N/A

Poor
Fair

Good

Excellent

Visual Appeal / UX Explanation *

Please provide a brief description.

No UX enhancements beyond lazy loading; doesn’t address loading indicators, fallback content, or
styling adjustments to improve perceived performance or polish.

21 words

Responsiveness

3
4

N/A

Poor

Fair

Good

Excellent

Responsiveness Explanation *

Please provide a brief description.

Introduces lazy loading (a plus) but ignores proper responsive image formats (WebP), CSS breakpoints,
or compression, so mobile performance gains are minimal.

23 words

Framework Proficiency

0
1

N/A

Poor

Fair

Good

Excellent

Framework Proficiency Explanation *

Please provide a brief description.

Vanilla HTML/JS only, with no use of any framework patterns or best practices (e.g., modular code,
components, state handling).

21 words
Response 3

Read-only

Decrease

Increase

Analysis of Blog HTML Code Issues

I've identified multiple issues that could be causing your mobile freeze problem and accessibility
challenges:

Issues and Solutions:

1. Missing Image Error Handling

Problem: The webpage tries to load images that may not exist (forest-small.jpg, etc.), which can cause
infinite loading if the images aren't available.

Solution: Add error handling for images:

JAVASCRIPT

// Add this to your script section

document.addEventListener('DOMContentLoaded', function() {

const images = document.querySelectorAll('img');

images.forEach(img => {

img.onerror = function() {

this.onerror = null;

this.src = 'placeholder.jpg'; // Fallback image

console.log('Image failed to load:', this.getAttribute('src'));

};

});
});

2. Accessibility Issues

Problem: Several accessibility issues with icon links and buttons.

Solution:

Add appropriate ARIA roles

Ensure all interactive elements are keyboard accessible

Fix missing alternative text

3. Initial Article Loading

Problem: The page tries to load an article when the content loads, but if stories.json doesn't exist or is
incorrect, it can freeze.

Solution: Add timeout and better error handling:

JAVASCRIPT

Collapse

async function loadArticle(id) {

try {

// Set a timeout for fetch

const controller = new AbortController();

const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout

const res = await fetch('stories.json', {signal: controller.signal});

clearTimeout(timeoutId);

if (!res.ok) throw new Error(`HTTP ${res.status}`);

// Rest of your function...

 } catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data: ${err.message}</p>`;

4. Lazy Loading Images

Problem: Loading all high-resolution images at once on mobile can cause performance issues.

Solution: Add loading="lazy" attribute to images:

HTML

<img

loading="lazy"

src="forest-small.jpg"

srcset="..."

sizes="..."

alt="Mystical forest path">

5. Missing Focus States

Problem: Interactive elements lack proper focus states for keyboard navigation.

Solution: Add CSS for focus states:

CSS

a:focus, button:focus {

outline: 2px solid #4d90fe;

outline-offset: 2px;
}

6. Font Awesome Icons Accessibility

Problem: Icon-only links need proper accessibility treatment.

Solution: The aria-hidden="true" attribute should be on all icons, and you should add descriptive text
visually hidden but available to screen readers:

CSS

.sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border-width: 0;

Then use:

HTML

<a href="/category/fantasy" title="Fantasy">

<i class="fas fa-hat-wizard" aria-hidden="true"></i>

<span class="sr-only">Fantasy stories</span>

</a>
These changes should resolve both the mobile freezing issues and improve accessibility for screen
readers.

437 words

Correctness

Poor

Fair

Good

Excellent

Correctness Explanation *
Please provide a brief description.

Suggests error handlers and timeouts, but doesn’t address the core render-blocking FontAwesome JS or
unoptimized assets; image-existence fallback won’t fix initial freeze.

25 words

Completeness

Poor

Fair

Good

Excellent
Completeness Explanation *

Please provide a brief description.

Covers a few concerns (error handling, lazy loading, focus states), yet omits ARIA live regions, proper
landmark roles, semantic link fixes, and network-path checks.

25 words

Clarity & Readability

Poor

Fair

Good
Excellent

Clarity & Readability Explanation *

Please provide a brief description.

Organized into clear sections with code snippets, its own heading and pairs, making fixes easy to follow,
some sections Missing Image Error Handling and Initial Article Loading remain at a surface ‐level
suggestion and do not explore best practices.

39 words

Visual Appeal / UX

4
N/A

Poor

Fair

Good

Excellent

Visual Appeal / UX Explanation *

Please provide a brief description.

Adds focus outlines and lazy loading, but doesn't apply user feedback patterns (loading indicators). The
style is not polished.

19 words

Responsiveness

2
3

N/A

Poor

Fair

Good

Excellent

Responsiveness Explanation *

Please provide a brief description.

Proposes lazy loading and error timeouts, but does not optimize image delivery (compression, modern
formats, breakpoints).

16 words

Framework Proficiency
0

N/A

Poor

Fair

Good

Excellent

Framework Proficiency Explanation *

Please provide a brief description.

Pure vanilla JS/CSS only; no use of componentization, modular patterns or any front-end framework best
practices.

18 words

Response 4

Read-only

Decrease

Increase

The code you've provided seems to be mostly correct, but there are a few potential issues that could be
causing the problems you're experiencing:

Images Loading Eternally: The issue with images loading eternally on mobile devices could be due to the
srcset and sizes attributes on the img tags. These attributes are used to provide different versions of an
image for different screen sizes, but they can sometimes cause issues if not implemented correctly.

To fix this, you can try removing the srcset and sizes attributes and just use the src attribute to load a
single version of the image. If you still want to use responsive images, make sure that the images are
correctly sized and compressed for web use.

Accessibility Issues: The accessibility issues you're experiencing could be due to the lack of alt text on
some of the icons. For example, the i tags inside the button elements do not have alt text, which could
cause issues for screen readers.

To fix this, you can add alt text to all icons, or use a different method to provide a text description of the
icon. You can also use ARIA attributes to provide more information about the icons and buttons.

Fetch API Issues: The Fetch API is used to load the stories.json file, but there is no error handling if the
file does not exist or cannot be loaded.

To fix this, you can add more robust error handling to the loadArticle function to handle cases where the
file does not exist or cannot be loaded.
Here is an updated version of the code with these issues fixed:

HTML

Collapse

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!-- Mobile viewport for responsive layouts -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Storyteller Blog</title>

<!-- Preconnect to Google Fonts for faster load -->

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

<!-- FontAwesome for icon bar -->

<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

<style>

body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 1rem;

line-height: 1.6;

header {
 text-align: center;

margin-bottom: 2rem;

.icon-bar {

text-align: center;

margin-bottom: 2rem;

.icon-bar a {

margin: 0 .5rem;

color: #333;

font-size: 1.5rem;

text-decoration: none;

.post {

max-width: 700px;

margin: 0 auto 3rem;

border-bottom: 1px solid #ddd;

padding-bottom: 2rem;

.post h2 {

margin-bottom: 0.5rem;

.post .meta {

color: #666;

font-size: 0.9rem;

margin-bottom: 1rem;

.post img {

width: 100%;
 height: auto;

display: block;

margin: 1rem 0;

.share-btn {

background: none;

border: none;

cursor: pointer;

font-size: 1.2rem;

margin-left: 0.5rem;

</style>

</head>

<body>

<header>

<h1>Storyteller Blog</h1>

<p>Where every tale finds its voice</p>

</header>

<!-- Icon bar: quick navigation -->

<div class="icon-bar" aria-label="Storyteller navigation">

<a href="/category/fantasy" title="Fantasy"><i class="fas fa-hat-wizard" aria-label="Fantasy"></i></a>

<a href="/category/scifi" title="Sci-Fi" ><i class="fas fa-rocket" aria-label="Sci-Fi"></i></a>

<a href="/category/poetry" title="Poetry" ><i class="fas fa-pen-nib" aria-label="Poetry"></i></a>

<a href="/category/tutorial" title="Tutorials"><i class="fas fa-chalkboard-teacher" aria-

label="Tutorials"></i></a>

<a href="/rss" title="Subscribe"><i class="fas fa-rss" aria-label="Subscribe"></i></a>

</div>
<!-- Post: The Enchanted Forest -->

<section class="post">

<h2><a href="#" onclick="loadArticle(1); return false;">The Enchanted Forest</a></h2>

<div class="meta">Published on May 20, 2025</div>

<p>Step inside a realm where every tree tells a story…</p>

<!-- Responsive image with srcset & sizes -->

<img

src="forest-small.jpg"

alt="Mystical forest path">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

</button>

</section>

<!-- Post: Tales of the Starship -->

<section class="post">

<h2><a href="#" onclick="loadArticle(2); return false;">Tales of the Starship</a></h2>

<div class="meta">Published on May 15, 2025</div>

<p>An odyssey through the silent void of space…</p>

<!-- Responsive image with srcset & sizes -->

<img

src="starship-small.jpg"

alt="Starship against nebula">

<button class="share-btn" aria-label="Share this story">

<i class="fas fa-share-alt" aria-hidden="true"></i>

 </button>

</section>

<!-- Container for full article content -->

<div id="article-content" style="max-width:700px; margin: 0 auto 3rem;"></div>

<script>

// Counter for the number of fetch calls

let fetchCount = 0;

async function loadArticle(id) {

try {

// Increment and log fetch count

fetchCount++;

console.log(`stories.json fetched ${fetchCount} time(s)`);

// 1. Fetch the entire static JSON file

const res = await fetch('stories.json');

if (!res.ok) {

throw new Error(`HTTP ${res.status}`);

const stories = await res.json();

// 2. Find the story with the matching id

const article = stories.find(s => s.id === id);

if (!article) {

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Article not found.</p>`;

return;
 }

// 3. Build HTML and inject

document.getElementById('article-content').innerHTML = `

<h2>${article.title}</h2>

<div class="meta">Published on ${article.published}</div>

${article.body}

`;

} catch (err) {

console.error('Failed to load stories.json:', err);

document.getElementById('article-content').innerHTML =

`<p style="color:red;">Could not load article data.</p>`;

// Load the first article on page load as an example

window.addEventListener('DOMContentLoaded', () => loadArticle(1));

</script>

</body>

</html>

I hope this updated code helps to fix the issues you're experiencing. Let me know if you have any further
questions or if there's anything else I can help with!

1,003 words

Correctness

1
2

Poor

Fair

Good

Excellent

Correctness Explanation *

Please provide a brief description.

Recommends dropping srcset entirely (losing responsive images) and misuses alt on <i> elements;
ignores the real freeze culprits like large JS bundles. Also, the code introduces aria-hidden="true", but
the section Accessibility Issues doesn't explain this change.

38 words

Completeness
1

Poor

Fair

Good

Excellent

Completeness Explanation *

Please provide a brief description.

Only three superficial fixes: removing srcset, adding alt to icons, and basic error handling; while omitting
performance, accessibility, and UX best practices (lazy loading, ARIA live regions, semantic
improvements).

29 words
Clarity & Readability

Poor

Fair

Good

Excellent

Clarity & Readability Explanation *

Please provide a brief description.

Organized as a numbered list that’s easy to follow, with a single unified code snippet, but lacks deeper
contextual notes on why each change matters.

25 words

Visual Appeal / UX

N/A

Poor

Fair

Good
Excellent

Visual Appeal / UX Explanation *

Please provide a brief description.

No enhancements to user feedback, loading states, or overall design polish; removing responsive image
support can worsen UX on different devices.

21 words

Responsiveness

4
N/A

Poor

Fair

Good

Excellent

Responsiveness Explanation *

Please provide a brief description.

Eliminates responsive image techniques rather than improving them; doesn’t introduce lazy loading,
compression, or adaptive formats, so mobile performance remains poor.

21 words

Framework Proficiency

2
3

N/A

Poor

Fair

Good

Excellent

Framework Proficiency Explanation *

Please provide a brief description.

Still pure HTML/JS with no demonstration of modern framework or modular coding patterns.

14 words

Quality of this Turn

Evaluate the quality of this turn, specifically focusing on quality of work on this turn before you make
any changes. We'll use these results to add additional review on the task as needed and surface
feedback to earlier contributors when relevant!

Read-only
Turn Quality: Prompt

Rate the quality of the prompt in this turn

Poor

Adequate

Excellent

Turn Quality: Response Selection *

Is the best quality response selected in this turn?

Yes

No

Turn Quality: Justification

Rate the quality of the justification in this turn

Poor

Adequate
Excellent

Turn Quality: Final Response

Rate the quality of the final response in this turn

Poor

Adequate

Excellent
Quality of the Task

Evaluate the quality of the overall task, specifically focusing on quality of work on the task before you
make any changes. We'll use these results to add additional review on the task as needed and surface
feedback to earlier contributors when relevant!

Read-only

Quality: Overall Task

Rate the quality of work done on this task holistically

Poor

Adequate
Excellent

Quality: Instruction Following *

Does the task follow all instructions provided in tasking instructions or instructional steps?

Yes

No

Overall Task Feedback *

Write a few sentences of feedback to the contributor who last worked on this task. Try and be as
actionable and specific as possible, this feedback will be directly surfaced to the relevant contributors!

Good task

2 words

Guidelines

CONFIDENTIAL INFORMATION

This document contains confidential and proprietary information intended solely for the use of the
individual or entity to whom it is disclosed.

Last updated at: May 28, 2025

Expert Sturgeon

Real World Coding Evaluation Instructions

Prompt + Eval ST

Updates and Change Log

Check for periodic updates and review any changes to stay successful on this task.

🟢 Changes successfully implemented.

🟡 Changes must be implemented immediately.

🔴 Changes under review.

Change Log

Date

Summary of changes
Changes requested by (link to reference)

May 15, 2025

Release date.

Internal.

May 19, 2025

Update L2 categories. Added justification field for scores 1-4.

Internal / Client

May 28, 2025

Added clarification about the Prompt Evaluation/Rewrite

Reformatting to improve readability

Rewording to fix inconsistencies

Internal

Task Overview

You will receive a prompt and generate four (4) model responses.

Your job is to work through the four steps below, in order.

Step
What you do

Purpose

A – Check/ Rewrite the prompt

Draft (or revise) a prompt that meets all prompt-writing criteria—correct programming-language tag,
domain, full intent coverage, and an explicit complexity level.

Ensures the downstream evaluation is based on a well-formed prompt.

B – Prompt quality assessment

Re-read the prompt you just received/wrote and check it against the same criteria (language, domain,
intent coverage, complexity). Confirm that it is acceptable or fix it before proceeding.

Prevents low-quality prompts from contaminating later steps.

C – Model failure evaluation

Generate the responses. Read each model’s response explanation. Decide whether at least one model
failed to meet the task requirements. Record Yes/No. A model fails if it fails on any single dimension
(either 1 or 2 in a dimension)

Establishes if any failure exists at the prompt level.

D – Per-model response ratings & justifications (repeat for all four models)

For each model response:

1. Rate every rubric dimension (1 – 4 or N/A).

2. For each rate you provide, write a justification of at least 80 characters explaining the weakness, or
why you chose your score.

3. If a dimension is truly not applicable (N/A) → mark N/A. You need to bring justification for N/A.

Produces structured, rubric-based feedback and written reasoning for low or non-applicable scores.

Follow these instructions carefully so the dataset contains high-quality prompts and reliable model-
evaluation labels.

Note 1: If the task does not involve code (e.g., pure design advice), simply ignore the rubric rows marked
“(if code is present).”

Part 1 - Prompt Assessment + Rewrites

Please DO NOT plagiarize prompts from any other source. Doing so will result in a posterior verification
of your account.

Your code should be self-contained or contain all context necessary for a reviewer to test the solution
and verify the output.

Additional Guidelines: Prompt Clarification Section for Classification/Rewrite here.

Prompt Quality

Context
Each task will be frontloaded with certain requirements. For the next few steps, it is your job to make
sure the prompt completely meets all requirements.

This is what you will see in each task, and a quick visual guide for how to think of each dimension.

Requirements

MUST produce original content.

MUST NOT copy from Stack Overflow, public GitHub, or other LLM outputs.

MAY reuse code from your private, unpublished projects.

MUST align the prompt with the task’s L0 category, L1 category, and L2 domain.

MUST align the prompt with the task’s specified intent coverage.

MUST meet Medium or Hard complexity per the rubric.

MUST cause at least one front-line LLM to fail when answering.

MUST be rewritten until all of the above “MUST” conditions are simultaneously satisfied.

SHOULD pose challenging, practical questions a professional developer might face.

MAY use any programming language listed for the task.

MAY use any appropriate libraries or frameworks, including—but not limited to—those listed.

IMPORTANT!

✅Model failure + ❌Incorrect domain/complexity/etc. ⇒ STILL MUST BE REWRITTEN.

Additional Context

We need realistic coding prompts to test how well different large-language models (LLMs) can handle
programming tasks.

Why your prompts matter

Measure how good each LLM is at coding.

See which languages and use-cases they handle well.

Spot where they still fail.

High-quality prompts help researchers understand current limitations and build more effective future
models.

Domains & Programming Languages

Detailed descriptions of L0 - L2 categories are included in the Appendix.

L0

L1

L2 Domain

Programming Languages
Libraries / Framework

Core Foundations

General Software Engineering

Software Design Patterns & Development, Programming Paradigms, Debugging & Testing, Code
Documentation, Version Control, Algorithm Design & Data Structures

C, C++, C#, Java, JavaScript, TypeScript, Python, Go, Rust, Swift, Ruby, Kotlin, Scala, Haskell, Clojure,
Pascal, Fortran, Lisp, SQL, Prolog, R, HTML/CSS, Julia, PHP

.NET, Node.js, LLVM, GCC, JDK, NumPy, Rust Standard Library, Spring Framework, Django, Angular,
React, Ruby on Rails, Laravel, Boost, JUnit, Jest, Git, Swagger

Script & Automation Tools

Shell Scripting, Batch Scripting, Web Scripting

Python, Ruby, Perl, Bash, Batch, PowerShell, Zsh, Fish, Csh/Tcsh, Dash, VBScript, JScript, JavaScript, Java,
Go, PHP, C#

AWK, Sed, Grep, jq, yq, Expect, NCurses, Zenity, WMIC, PsExec, AutoIt, Windows Script Host, WinSCP,
Ansible, Puppet, Chef, Selenium, Appium, TestNG, Cucumber, Node.js, BeautifulSoup, Puppeteer.

Data Management & Intelligence

Database Management
Database Implementation & Query Processing, Data Architecture & Storage Systems, Database
Administration

SQL, Python, Java, PL/SQL, C#, T-SQL, C++, Bash, PowerShell, Go, PHP

MySQL, PostgreSQL, Oracle Database, Microsoft SQL Server, MongoDB, MySQL Workbench, SQL Server
Management Studio, pgAdmin, Apache Cassandra, MariaDB, SQLite, AWS RDS, Azure SQL Database,
Elasticsearch, DynamoDB, Hadoop HDFS, Google Cloud SQL, phpMyAdmin, Oracle Enterprise Manager,
Lucidchart

Data Science & Engineering

Data Architecture & Infrastructure, Data Engineering & DataOps, Data Analysis & Visualization

Python, R, Java, Scala, SQL, JavaScript, Julia, Shell

Apache Hadoop, Apache Airflow, Apache Spark, Apache Kafka, Pandas, NumPy, Matplotlib, Seaborn,
Tableau, Power BI, Jupyter, Snowflake, Google BigQuery, Databricks, dbt, D3.js, Plotly, Scikit-learn,
Hadoop, Azure Synapse, Kubernetes, Amazon Redshift, Terraform, Jenkins, GitLab CI, Luigi, Bokeh,
ggplot2, Apache NiFi

Artificial Intelligence (AI) & Machine Learning (ML)

Natural Language Processing (NLP) & Speech, Computer Vision, Generative AI , Robotics, ML Ops

Python, R, Java, MATLAB, Julia, C++, Scala, SQL, Rust, Shell

TensorFlow, PyTorch, Keras, Scikit-learn, Hugging Face, OpenCV, NumPy, Pandas, NLTK, spaCy, XGBoost,
MLflow, Kubeflow, LangChain, ROS, FastAI, Transformers, Docker, Kubernetes, Airflow, TFX, DeepSpeed,
Gensim, OpenAI GPT API, MATLAB

Application Development
Web Development

Front-end Development, Back-end Development, DevOps & Deployment, Web Testing & Performance
Optimization, Architecture & Patterns

HTML, CSS, JavaScript, Java, Python, Ruby, PHP, TypeScript

Node.js, ASP.NET, React, Angular, Vue.js, Spring, Hibernate, Django, Flask, Ruby on Rails, Sass, Less,
jQuery, AngularJS, Bootstrap

Mobile App Development

Android App Development, iOS App Development, Cross-platform Development, Mobile App Testing,
Mobile App Performance Tuning

C, C++, C#, Objective-C, Java, JavaScript, TypeScript, Swift, Kotlin, Dart

Android SDK, iOS SDK, React Native, Flutter, Xcode, CocoaPods, Xamarin, Ionic, PhoneGap, Appium,
Selenium, JUnit, TestNG, Cucumber

Game Development

Game Systems & Engine Development, Art & Animation, Sound Design & Audio, Platform Deployment &
Testing, Interactive & Immersive Experiences

C++, C#, Java, Python, JavaScript, Lua, Swift, GDScript

MonoGame, LibGDX, Pygame, Phaser, Cocos2d-x, and SFML, Unity, Unreal Engine, Godot, CryEngine,
PhysX, Havok, Box2D, OpenCV
.

Intent Coverage

Useful EXAMPLES are in the Appendix section.

Task/Intent Coverage

Description/Example

Defect/Vulnerability Detection

Discovering security vulnerabilities or potential weaknesses in code that could be exploited, e.g. SQL
injection vulnerability in a web application's login form

Code Generation/Completion

Generating code from starter code, examples and/or with user’s description.

Code Edit

Corrective

e.g. repair, debugging

Fixing errors or bugs in code, assisting developers in debugging

Perfective

e.g. efficiency, readability or maintainability

Making structural changes to code, such as refactoring or optimizing, to improve functionality or

performance e.g. refactors a loop into a more efficient algorithm

Adaptive

e.g. requirement switch

Modifying an existing function to serve a new purpose or integrate into a different context while
retaining its core functionality

Code Search

Locating relevant code snippets from context and user description

NOTE: You're asking the assistant to find relevant code within the provided context, not to create or
rewrite it.

Test Case Generation

Generating test case for automatic regression testing or bug reproduction

Code Summarization

Generating commit messages from two versions of code. Generating documentation for a script.
Code Explanation

Generating docstrings or comments. Explain the functionality, purpose and I/O reasoning of a
function/query/script/class

Code Review

Reviewing code changes and evaluating whether they align with the intended functionality, project and
style requirements, efficiency etc.

Complexity

Use this table when deciding whether a prompt is Easy, Medium, or Hard.

Level

Experience Assumed

Knowledge & Context Required

Nature of a Valid Solution

Easy (✗ not allowed)

Upper-undergraduate CS student.
Only basic language syntax, trivial APIs, or one self-contained function. No architectural background
needed.

Single-concept fix or toy script; no tricky edge cases. A front-line LLM usually solves it in ≤ 1 answer.

Medium (✓ acceptable)

Strong senior-undergrad / early-master’s developer.

Familiarity with standard algorithms or mainstream libraries (e.g., pandas, Spring, Express, SQL joins)
plus several lines of surrounding code or config.

Requires decomposing the task into 2-3 logical steps, handling corner cases, or refactoring non-trivial
code. A front-line LLM may need iterative reasoning/tests, not a one-shot reply.

Hard (✓ encouraged)

Domain expert (5 + years) or specialist (e.g., ML ops, low-latency C++, Kubernetes SRE).

Deep API surface, multi-file context, precise performance/security constraints, or production

deployment details.

Involves multiple inter-dependent sub-problems, subtle bugs, or performance/security traps. Even a

front-line LLM is likely to miss parts without careful prompting and chain-of-thought. Extensive
explanation is needed for a non-expert reader.

Rule of thumb:

If you would confidently give the prompt to ChatGPT-4-turbo and expect a perfect answer in one
response, then the prompt is Easy - rewrite it! Otherwise, craft it to meet Medium or Hard as per the
table above.
What is a “front-line LLM”?

A front-line LLM is any publicly accessible, state-of-the-art model that engineering teams already rely on
for day-to-day coding help. Examples today include ChatGPT-4-turbo, Chat GPT 4o, Gemini 1.5 Pro,
Claude 3 Opus, etc.

When we write a prompt we need to ask ourselves “Does the prompt feel too easy for testing a front-
line LLM?”, we mean: Would one of these top models likely solve it fully, on the first try, with little-to-no
reasoning or iteration?

If the answer is “yes,” the prompt is too easy for this project.

💡Pro Tips - Writing prompts that are hard enough

Use the checklist as guidance; you don’t need every item, but hitting several usually lifts a prompt to
Medium/Hard.

Checklist item

Why it raises complexity

Practical tips & examples

1 Give real context (code + files ≥ 2)

Forces the model to read, cross-reference, and reason—rather than generate from scratch.

• Include a short function plus its unit test file.

• Paste a Dockerfile and a CI step that calls the script.

• Provide a JSON schema + a TypeScript model class.

2 Specify 2-3 distinct requirements

The model must plan and satisfy multiple goals.

“Refactor for O(n log n) time and add a retry mechanism with exponential backoff.”

3 Add a non-obvious constraint

A front-line LLM can’t rely on a canned snippet.

• “Must keep memory ≤ 30 MB on inputs up to 1 M rows.”

• “Solution must work on Node 14 (ES2019 only).”

4 Include at least one edge case

Tests the model’s ability to anticipate pitfalls.

“Handle empty CSV files and files with a single column.”

5 Pin the environment / toolchain

Prevents the model from hand-waving with generic advice.

“Use pandas 2.x and pyarrow; avoid deprecated .ix.”

6 Require an explanatory artefact

Demands both code and reasoning.

“Return the patched function plus a 3-line docstring that explains the algorithm.”

7 Set a measurable target

Makes correctness easy to verify and discourages vague answers.

“Unit test test_sort.py::test_large_random must run < 1 s on 1 M items.”

8 Ask for idiomatic style or pattern

Checks deeper language/library mastery.

“Rewrite using Kotlin coroutines and flow {} instead of callbacks.”

9 Disallow the obvious library (optional)

Forces alternative thinking.

“Do not use NumPy’s built-in median; implement from primitives.”

10 Limit output scope

Keeps it solvable in one turn.

“Modify only parse_date(); leave other helpers untouched.”

Part 2 - Model Response Assessment (Evaluation)

REQUIREMENTS:

MUST Rate every rubric dimension (1 – 4 or N/A).

When a Dimension (ex. Engine Tool Proficiency) is not relevant to the prompt and response, then mark
N/A.

If a specific Dimension relates to code and there is no code available from the response, then mark N/A.

Justifications - explaining the weaknesses or why you choose your score.

MUST provide reasons paired with specific supporting evidence.

MUST be written in English.

MUST be at least 3 sentences long. This provides enough detail to explain your reasoning thoroughly.

SHOULD be concise so that it is easy for reviewers to understand.

Now you have at least one (1) model failure, you will need to evaluate the four (4) model responses
under a rubric that is aligned with the L1 domain of the task.
To evaluate the response, focus on the quality of the response itself, not on additional work the model
could have done. Be objective and cite concrete evidence (e.g., line numbers, missing edge cases, style
violations, performance estimates).

Remember the current L1 domains:

General Software Engineering

Script & Automation Tools

Database Management

Data Science & Engineering

Artificial Intelligence (AI) & Machine Learning (ML)

Web Development

Mobile App Development

Game Development

Following you will find the mentioned rubrics.

Software Development (General Coding & Backend)

Dimension

4 - Excellent

3 - Good

2 - Fair
1 - Poor

Correctness

Response is factually and technically correct for the task — e.g., the fix works, the explanation is
accurate, or the code is valid.

Mostly correct, with minor technical or logical flaws.

Contains errors that impact usefulness or trust.

Incorrect or misleading; fails the primary purpose.

Completeness

Fully addresses all task requirements, including edge cases, context, or follow-up considerations.

Covers most essential parts of the task.

Incomplete; misses notable parts or conditions.

Barely addresses the task; superficial or partial.

Clarity & Readability

Clear, well-structured explanation and/or code. Easy to follow, with meaningful naming, good
formatting, and logical flow.

Generally clear with small areas of confusion or clutter.

Hard to follow due to poor organization or naming.

Confusing or unreadable; lacks structure.

Code Quality / Design

(if code is present)

Code is modular and reusable, demonstrating appropriate abstraction and effective use of design
patterns.

Mostly sound design; a few shortcuts or style issues.

Works, but has design flaws, smells, or repetition.

Poor design, unidiomatic, or uses anti-patterns.

Scalability

(if code is present)

The solution is efficient, highly optimized for performance and resource usage and would scale well in
production.

Reasonable performance for common cases.

Inefficient or not scalable beyond small inputs.

Naïve or fragile solution.

Reasoning & Explanation

Rationale is clear, technically sound, and insightful. Explains why the approach works or what the fix
does.

Some explanation; mostly correct but lacks depth.

Weak or vague reasoning; minimal insight.

Incorrect or absent explanation.

Web Development (Frontend & Fullstack)

Dimension

4 - Excellent

3 - Good

2 - Fair

1 - Poor

Correctness
All implemented features function correctly across different scenarios and devices. Debug fixes, edits, or
explanations accurately resolve or describe the underlying issue.

Application works mostly as intended with minor issues that do not affect the overall experience. Fixes
or descriptions are mostly correct.

Specific interactions or devices face occasional functionality issues. Fixes are partial or only superficially
relevant.

Application fails to function correctly on most platforms. Critical features are non-functional or break
often. Fix or explanation is wrong or misleading.

Completeness

All UI and functionality requirements are fully met, with comprehensive handling of edge cases.
Responses cover full context, dependencies, and behaviors.

Key interactions are present, but some functionalities or rationale could be expanded.

Some key components, cases, or insights are missing or incomplete.

Minimal functionality or insight provided. Large gaps make the result barely usable.

Clarity & Readability

Code is well-structured with clean components and follows naming conventions. Comments or
explanations significantly enhance understanding.

Overall clarity is maintained with minor bloat or repetition. Comments and structure support
comprehension.
Readability is hindered due to sparse comments, verbose or inconsistent structure.

Code or explanation lacks organization and clarity. Major refactoring or restructuring is needed.

Visual Appeal / UX

Consistent styling and clean design enhance aesthetic appeal and usability. UI follows modern web
design and UX best practices.

Design is generally appealing with small inconsistencies. UX is solid with minor flaws in flow or layout.

The UI is functional but lacks polish. Layout or visual design appears default or underdeveloped.

Poor styling choices impair =usability. Cluttered or broken UI makes interaction unpleasant or difficult.

Responsiveness

Fully responsive design adapts cleanly to all screen sizes and devices. Includes mobile-first practices and
accessibility considerations.

Mostly responsive with minor layout or styling issues on some devices.

Limited responsiveness with usability issues on tablets or mobile. Accessibility is minimal.

Lacks responsiveness, with layout and performance problems across non-desktop devices.

Framework Proficiency

Effective use of advanced framework features (e.g., routing, state management, component lifecycles).
Code reflects idiomatic use of chosen tools (React, Vue, etc.).
General framework usage is correct and efficient. May miss advanced optimizations or idioms.

Limited understanding; avoids advanced features or contains inefficient patterns.

Heavy reliance on boilerplate or plugins due to poor framework understanding. Misuses key patterns or
APIs.

Data Science & Engineering

Dimension

4 - Excellent

3 - Good

2 - Fair

1 - Poor

Correctness

Code, analysis, or explanations are statistically valid and technically correct. Computations, logic, and
results align with standard practices.

Mostly correct with minor mistakes that don’t significantly affect outcomes.
Contains notable errors in logic, math, or assumptions that could mislead.

Fundamentally incorrect results, assumptions, or computations. Misrepresents data or statistical

meaning.

Completeness

Fully addresses the task with necessary components (e.g., preprocessing, validation, edge cases).
Nothing critical is omitted.

Addresses most major parts of the task, with small omissions.

Important steps or context are missing (e.g., no data cleaning, no validation).

Severely incomplete — core steps like loading, cleaning, modeling, or evaluating are absent.

Clarity & Readability

Code and/or explanations are well-structured, commented, and logically organized. Output is
interpretable and easy to follow.

Mostly clear, with small areas of clutter or verbosity. Variable names and comments generally support
understanding.

Organization is inconsistent. Sparse commenting, unclear variable names, or cluttered outputs.

Confusing structure. Lacks clarity in logic, names, comments, or output formatting.

Statistical Soundness
Uses appropriate statistical methods, distributions, or metrics. Shows awareness of biases, assumptions,
and modeling limitations.

Mostly sound approach with a few weak assumptions or missing justifications.

Superficial use of statistics or metrics without clear justification.

Inappropriate or misleading use of statistics. No awareness of validity, sampling, or assumptions.

Data Handling Quality

Demonstrates robust data loading, cleaning, transformation, and validation practices. Handles edge
cases and missing values gracefully.

Handles typical data challenges correctly, with a few simplifications.

Minimal or incomplete data processing. Some common issues are unhandled.

Poor or no data preprocessing. Code breaks or misbehaves with dirty, missing, or unexpected data.

Visualization & Reporting

(if applicable)

Visualizations are clear, relevant, and enhance communication of results.

Most visualizations are effective but could be refined. Useful plots and tables included despite minor
formatting issues.
Visuals are present but lack essential details. Plots and tables are unclear or messy, hindering
understanding.

Visual presentations do not support comprehension of results.

AI & Machine Learning

Dimension

4 - Excellent

3 - Good

2 - Fair

1 - Poor

Correctness

Response is technically accurate with no factual errors. Aligns with current ML practices, theories, and
tool behavior.

Mostly accurate with minor oversights or simplifications that don’t affect core validity.

Contains noticeable technical inaccuracies or misrepresents key ML principles.

Fundamentally incorrect or misleading. Could cause major confusion or implementation failure.

Completeness

Fully addresses all aspects of the user's question, including assumptions, caveats, and relevant details
(e.g., data shape, model compatibility, evaluation logic).

Covers core points but omits some secondary context or best practices.

Superficial or partially complete. Misses key components or steps needed to apply the answer.

Only a fragmentary or generic response. Ignores the actual question or task structure.

Clarity & Reasoning

Clear and logically structured explanation. Progresses step-by-step, justifies recommendations, and
communicates assumptions.

Mostly clear with minor jumps in logic or imprecise language. Reasoning is understandable.

Hard to follow or loosely structured. Reasoning is vague or lacks justification.

Poorly written or incoherent. Difficult to interpret or logically invalid.

Conceptual Soundness

Demonstrates understanding of underlying ML/AI theory (e.g., optimization, generalization, model bias,
overfitting). Accurately links theory to practice.

Mostly sound reasoning with minor theoretical gaps or simplifications.

Simplistic or shaky reasoning. Misses important nuances or foundational concepts.

Misrepresents core AI/ML principles. Shows poor grasp of theory or its practical relevance.

Practical Relevance

Response provides actionable advice that maps to real-world tools (e.g., PyTorch, TensorFlow, Hugging
Face) or typical workflows (e.g., training, evaluation, deployment).

Provides generally useful guidance but lacks direct tie-in to practical tools or scenarios.

Suggestions are vague or outdated, or mismatched to standard ML workflows.

Offers impractical or obsolete guidance. Fails to link advice to real-world ML practice.

Evaluation Awareness

Demonstrates appropriate selection and interpretation of metrics (e.g., accuracy vs. F1, AUC, loss
curves). Discusses evaluation trade-offs clearly.

Applies reasonable metrics, though interpretation or explanation is somewhat limited.

Uses unclear or inappropriate metrics. Omits key discussion of evaluation quality.

Misuses metrics or misinterprets results. Evaluation advice is misleading or invalid.

Database Management

Dimension

4 - Excellent

3 - Good

2 - Fair

1 - Poor

Correctness

SQL syntax, logic, and DBMS-specific behaviors are correct. Joins, conditions, and outputs are valid and
accurate.

Mostly correct with only minor logical or syntactic flaws.

Contains notable mistakes in syntax, logic, or assumptions about DB behavior.

Severely flawed. Invalid SQL, broken assumptions, or completely incorrect database logic.

Completeness

Fully answers the query or task. Handles edge cases, covers constraints, indexes, or joins as needed.

Covers main components of the task. Some advanced handling or edge cases may be omitted.
Partial answer — key clauses, constraints, or considerations are missing.

Largely incomplete. Fails to address the core database task.

Clarity & Explanation Quality

Clear structure and explanation of queries, schema, or DB principles. Easy to follow and educational.

Understandable with some verbosity or jargon. May assume some DB knowledge.

Somewhat confusing or shallow in explanation. Relies too much on code without context.

Poorly explained, confusing, or misleading. Offers no insight into DB concepts or query logic.

Query Efficiency / Optimization Awareness

Suggests efficient queries with awareness of indexing, filtering, JOIN strategies, and query plans.

Mostly efficient with minor missed opportunities (e.g., unindexed filters, redundant clauses).

Naïve query design. Misses basic optimizations. Could be expensive at scale.

Inefficient or dangerous (e.g., full table scans, Cartesian joins). Ignores performance entirely.

Schema Design & Normalization

Proposes well-structured, normalized schemas. Shows understanding of relationships, constraints, and

key selection.
Schema is mostly valid with minor normalization or constraint oversights.

Simplistic design or over-normalization. Incomplete use of keys or relationships.

Poor design — violates normalization, uses ambiguous types or keys, lacks integrity.

Context Awareness

Adapts answer to DBMS (e.g., MySQL vs. PostgreSQL), user goals, data size, and usage pattern. Mentions
relevant tradeoffs.

Generally relevant advice with minor mismatches or assumptions.

Limited adaptation to context. Offers generic or partially relevant help.

Completely ignores user’s context, DBMS, or use case. Offers irrelevant or risky advice.

Game Development

Dimension

4 - Excellent

3 - Good

2 - Fair
1 - Poor

Correctness

Code logic and explanations are fully aligned with game engine behavior and programming language
specifics (e.g., Unity C#, Unreal Blueprints). No technical flaws.

Mostly correct with minor mistakes or outdated syntax that don’t block functionality.

Noticeable technical issues or misunderstanding of engine/game loop. May break intended

functionality.

Fundamentally flawed. Shows lack of understanding of game engine, physics systems, or scripting.

Completeness

Fully addresses the task. Covers input, output, timing, interactions, and integration (e.g., character
movement, animation triggers).

Covers the main logic but skips secondary systems or edge handling (e.g., state resets, collisions).

Partially complete or too abstract. Key components like input handling or UI feedback are missing.

Very incomplete. Bare-bones or off-topic response.

Clarity & Readability

Clear, modular explanation of game logic and design decisions. Makes assumptions explicit and explains
trade-offs.
Generally understandable, but some steps or reasoning may be implicit or oversimplified.

Difficult to follow or jumps between ideas. Doesn’t clearly explain how the game logic fits together.

Confusing, vague, or technically incoherent.

Engine/Tool Proficiency

Uses game engine features effectively (e.g., Unity Events, Unreal Components). Understands scene
setup, asset use, prefabs/blueprints.

Uses appropriate tools with some missed optimization or slightly verbose solutions.

Limited grasp of built-in engine systems. Relies too heavily on manual or brute-force approaches.

Misuses or ignores core engine tools. Suggests nonviable or non-performant approaches.

Gameplay Awareness

Demonstrates understanding of game design principles (e.g., feedback loops, pacing, affordances).
Suggestions enhance player experience.

Basic awareness of UX/gameplay concerns with acceptable implementation.

Mechanics are functional but lack polish or feedback. User experience feels secondary.

No regard for game feel or player experience. May produce jarring or unplayable results.
Performance Consideration

Aware of performance best practices (e.g., update loops, physics load, draw calls, garbage collection).
Avoids unnecessary computation.

Acceptable performance trade-offs. Could be further optimized in complex games.

Suboptimal practices that could affect FPS or runtime on real hardware.

Inefficient or costly logic likely to degrade performance even in simple cases.

Scripting & Automation Tools

Dimension

4 - Excellent

3 - Good

2 - Fair

1 - Poor

Correctness

Script or automation flow is technically sound, logically coherent, and compatible with the intended
runtime environment (e.g., Bash, Windows, GitHub Actions).
Mostly correct with only minor platform-specific oversights or slight inefficiencies.

Contains noticeable logic or syntax issues; may not work without user intervention.

Technically broken or incompatible. Would fail or behave unpredictably.

Completeness

Fully addresses task requirements: setup, dependencies, error handling, logging, and platform nuances.

Core functionality is covered, but missing optional flags, error checks, or system integration steps.

Basic logic provided, but omits important setup or environment considerations.

Barebones response with major omissions. Fails to fulfill most of the intended automation task.

Clarity & Modularity

Response uses well-structured, readable, and reusable scripting practices (e.g., named functions,
comments, parameterization).

Generally clear with slight verbosity or tight coupling. Mostly easy to understand and reuse.

Lacks organization or abstraction. Hard to adapt or extend.

Poorly structured, hard to follow. Comments missing or misleading.

Tool Proficiency & Conventions

Demonstrates deep knowledge of the scripting environment or toolchain (e.g., idiomatic Bash, Python
CLI libraries, CI/CD YAML structures).

Familiar with core features but misses idiomatic or advanced usage.

Rudimentary or verbose usage of tools. Might rely on outdated patterns or unnecessary complexity.

Misuses tools or uses incorrect conventions (e.g., bad quoting, insecure paths, wrong YAML keys).

Error Handling & Robustness

Includes solid input validation, exit codes, logging, retries, and cleanup logic. Suitable for production use.

Basic error handling present. May miss edge cases or assume ideal inputs.

Minimal validation or error handling. Could break under common real-world conditions.

No robustness or fault tolerance. Fragile and unsafe in automation settings.

Environment & Dependency Awareness

Correctly considers OS, shell, file system structure, environment variables, and external tools (e.g., cron,
systemd, pip).

Mostly accurate, but may assume one OS or miss portable details.

Assumes a narrow or unrealistic environment.

Ignores platform requirements, dependencies, or runtime context.

IMPORTANT!

To maintain fairness and scoring consistency across all responses, please refer to and complete the
following checklist: Link to Checklist Document

Appendix

Definition of Domain Taxonomy

L0

L1

L2

Definition

Core Foundations

Essential principles of software engineering, scripting, and automation focusing on building reliable,
maintainable software systems and streamlining tasks through automated scripts to meet user and
business needs.
General Software Engineering

The discipline of designing, developing, testing, documenting, and maintaining software systems by
applying software engineering principles, programming methodologies with the goal of building reliable,
scalable, and maintainable software solutions that meet user and business needs.

Software Design Patterns & Development

The process of identifying, analyzing, and applying reusable solutions including creational, structural,
and behavioral patterns to common software design problems with the goal of improving code
organization, modularity, and maintainability. The process of writing, organizing, and refining source
code using programming languages, tools, and techniques to create functional software components
and applications.

Programming Paradigms

The set of methodologies used to organize and structure software solutions based on distinct styles and
principles of programming, such as imperative, declarative, functional, procedural programming, etc.

Debugging & Testing

The process of identifying, analyzing, and fixing errors, bugs, and defects in software systems through
various testing methods including unit, integration, and system testing to ensure correctness,
robustness, reliability, and optimal performance of the system.

Code Documentation

The process of writing and maintaining descriptive and structured text, comments, and explanations of
the code, its functionality, structure, and usage with the goal of facilitating understanding, collaboration,
and future maintenance.

Version Control
The process of managing changes to source code and related files over time using systems that record
revisions, track history of modification, and facilitate collaboration among multiple developers and
collaborators.

Algorithm Design & Data Structures

The process of designing, creating, and managing data structures and algorithms for solving
computational problems and structuring data in a way that optimizes access, storage and manipulation
by software programs.

Scripting & Automation Tools

The process of writing scripts to automate tasks, including shell scripting, batch scripting, automation
scripting, and web scripting.

Shell Scripting

The process of writing scripts designed to run by Unix-like operating systems, including bash, zsh, and
fish.

Batch Scripting

The process of writing scripts designed to be run in DOS, OS/2, and Windows, including batch files and
PowerShell.

Web Scripting

The process of writing scripts to automate web-related tasks such as web scraping, browser automation,
and form submission.
Data Management

& Intelligence

The comprehensive discipline of organizing, maintaining, and analyzing data through structured systems
and intelligent algorithms to extract actionable insights that drive informed decision-making and create
strategic value.

Database Management

The process of designing, implementing, storing, and maintaining databases to ensure efficient data
organization, retrieval, and integrity, including defining structures, optimizing queries, managing storage
models, and performing administrative tasks such as configuration and recovery.

Database Implementation & Query Processing

The process of implementing a database system based on the design specifications and optimizing query
execution to ensure efficient data retrieval, manipulation, and management through effective indexing,
sorting and joining techniques.

Data Architecture & Storage Systems

The process of conceptualizing, designing, and modeling the structure of a database and creating logical
and physical schemas that ensure efficient data storage, retrieval, and integrity. This includes defining
entities, relationships, and normalization principles. It also includes defining and managing physical
storage structures within a database system, including row-based, column-based, object-oriented, and
NoSQL storage models to optimize data access, storage efficiency, and scalability.

Database Administration
The process of managing and maintaining databases, including configuration, backup and recovery, and
performance optimization.

Data Science & Engineering

The discipline of designing, building, maintaining, and leveraging data systems to transform raw data
into actionable insights, encompassing the full data lifecycle from infrastructure design and pipeline
development to analysis and end visual representation, ensuring organizations can effectively utilize
data as a strategic asset for informed decision-making.

Data Architecture & Infrastructure

The process of designing, developing, and managing the structures and systems that store, process, and
govern data throughout its lifecycle, including databases, data lakes, data warehouses, and cloud
infrastructure to ensure scalability, reliability, and security.

Data Engineering & DataOps

The practice of building and maintaining reliable, scalable data pipelines and applying DevOps principles
to data workflows for continuous integration, delivery, monitoring, and automation.

Data Analysis & Visualization

The process of exploring, visualizing, and interpreting structured and unstructured data to discover
patterns, generate insights, and support data-driven decision making. This includes presenting complex
data in a clear and meaningful way using visualizations like charts, graphs, and maps to enhance
understanding and communication of key findings.

Artificial Intelligence (AI) & Machine Learning (ML)

The development of computational systems that can perform tasks requiring human-like intelligence,
such as natural language processing, speech recognition, computer vision, generative AI, robotics by
learning patterns from data to improve performance without explicit programming.

Natural Language Processing (NLP) & Speech

The process of developing algorithms and models that can understand, interpret, and generate human
language, including text and speech.

Computer Vision

The process of developing algorithms and models that can interpret and understand visual data from
images and videos.

Generative AI

The process of developing AI models that can create new content, including text, images, music, and
videos, by learning patterns from existing data.

Robotics

The process of designing, developing, and operating robotic systems that interact with the physical
world, utilizing sensors, actuators, and control systems alongside artificial intelligence and machine
learning to perform tasks autonomously.

ML Ops

The process of automating and managing the lifecycle of machine learning models in production,
encompassing deployment, monitoring, versioning, scalability, and collaboration across data science and
engineering teams.
Application

Development

The overarching discipline encompasses the design, creation, testing, and deployment of software
applications across various platforms and purposes, utilizing diverse programming languages,
frameworks, and tools to meet specific user needs and functionalities and can be deployed across
different devices and environments.

Web Development

The process of designing, building, and maintaining websites, web applications, and web services using
programming languages such as HTML, CSS, JavaScript, and server-side languages like PHP, Python, and
Ruby. This includes front-end development (client-side), back-end development (server-side), devOps,
deployment, testing, tuning, architecture, as well as web frameworks, libraries, and databases.

Front-end Development

The process of building the user interface and user experience of a website or web application using
programming languages like HTML, CSS, and JavaScript, as well as frameworks like React and Angular.

Back-end Development

The process of building the server-side logic and database integration of a website or web application
using programming languages like Java, Python, and Ruby, as well as frameworks like Node.js and
Django.

DevOps & Deployment

The process of integration of development and operations processes to enable continuous delivery,
deployment, and monitoring of web applications.

Web Testing & Performance Optimization

The process of verifying and validating the functionality, usability, performance, and security of different
components of web applications and their compliance with best practices, ensuring reliability and user
satisfaction. This also includes the practice of optimizing web applications to improve load times,
responsiveness, and resource efficiency for better user experience and search engine optimization.

Architecture & Patterns

Design principles and structural approaches that organize code and systems to enhance maintainability,
scalability, and reliability of web applications.

Mobile App Development

The process of designing, building, and deploying mobile applications for Android and iOS devices, using
programming languages like Java, Swift, and Kotlin. This includes native app development, cross-
platform development using frameworks like React Native and Flutter, and hybrid app development, as
well as mobile app testing, debugging, and tuning.

Android App Development

The process of building mobile applications for Android devices using programming languages like Java
and Kotlin, as well as frameworks like Android Studio.

iOS App Development

The process of building mobile applications for iOS devices using programming languages like Swift and
Objective-C, as well as frameworks like Xcode.
Cross-platform Development

The process of building mobile applications that can run on multiple platforms, including Android and
iOS, using frameworks like React Native and Flutter.

Mobile App Testing

The process of testing and debugging mobile applications to ensure they are stable, secure, and meet
user requirements.

Mobile App Performance Tuning

The process of optimizing mobile applications to improve speed, responsiveness, resource efficiency,
and battery usage, identifying bottlenecks, reducing memory leaks, optimizing network calls, and
enhancing UI rendering to ensure smooth user experiences across devices and OS versions.

Game Development

The process of designing, building, and testing video games using programming languages like C++, Java,
and Python, as well as game engines like Unity and Unreal Engine.

Game Systems & Engine Development

The process of conceptualizing and designing gameplay mechanics, rules, storylines, characters, and
user experiences, alongside developing the core systems that power games. This includes building and
refining game engines to handle rendering, animation, and physics, as well as integrating artificial
intelligence and physics simulations to enable realistic behaviors and dynamic interactions within virtual
environments.

Art & Animation

The creation of visual assets such as 2D/3D models, textures, animations used to enhance the visual
appeal of games.

Sound Design & Audio

The process of creating, editing, and integrating sound effects, background music, voiceovers, and
ambient audio to enhance the atmosphere and immersion of a game.

Platform Deployment & Testing

The process of building, deploying, testing, and debugging games across multiple platforms such as PC,
consoles, mobile devices, ensuring compatibility, performance, and compliance.

Interactive & Immersive Experiences

The process of designing and developing immersive applications that blend real and virtual
environments using technologies such as Virtual Reality, Augmented Reality, and Mixed Reality, focusing
on user interaction and sensory engagement.

Intent Coverage Examples (Medium Complexity Prompts)

Defect / Vulnerability Detection

“Find the weak spots before attackers do.”

Aspect

What it means

Goal
Identify security flaws, logic errors, or mis-configurations that could be exploited.

Typical inputs

• A single file, pull-request diff, dependency manifests (package.json, requirements.txt, go.mod,

pom.xml), Build / CI scripts (.github/workflows/*, Jenkinsfile, GitLab CI), Configuration files (Dockerfile,
docker-compose.yml, Kubernetes YAML, Terraform, Ansible, Cloud-Formation), Security-scanner reports
(even partial).

• Stack traces, vulnerability scans, dependency lists.

• Infrastructure-as-code configs (Dockerfiles, Terraform, Kubernetes YAML).

Typical outputs

• A list of vulnerable lines or blocks, each with an explanation (“unsanitised SQL parameter → SQL
injection”).

• Risk severity (Low/Med/High, CVSS).

• Recommended fixes or safer patterns.

Focus areas

Authentication / authorisation gaps, input validation, injection, XSS, insecure crypto, race conditions,
hard-coded secrets, dependency CVEs, overly permissive IAM policies.

Granularity
From single-line nits (e.g. eval(user_input)) to architectural issues (no rate-limiting on login endpoint).

Audience

Security engineers, developers tasked with remediation, compliance teams.

Examples

Shell Scripting & Automation — Bash + Ansible

Analyse the attached deploy_cluster.sh and its companion Ansible playbook. Identify command-injection
or privilege-escalation risks when run by junior ops staff. For each risk, explain an exploitation scenario
and propose a mitigated snippet (e.g., -- to end ssh options, set -euo pipefail, quoting). Prioritise findings
with High/Med/Low severity.

deploy_cluster.sh

```shell

#!/usr/bin/env bash

# ------------------------------------------------------------

# Naïve deployment helper (INTENTIONALLY VULNERABLE)

# Usage: ./deploy_cluster.sh <target_host> <src_dir> <dest_dir> [extra_rsync_opts]

# ------------------------------------------------------------

target_host=$1 # <--- unquoted, no validation

src=$2

dest=$3

opts=$4 # user-supplied, piped straight into rsync

echo "[*] Syncing $src to $target_host:$dest ..."

eval "rsync -avz $opts $src $target_host:$dest" # <--- uses eval

echo "[*] Restarting service on $target_host ..."

ssh $target_host "sudo systemctl restart myapp" # <--- no -- terminator / quoting

echo "[+] Done."

```

playbook.yml

```yaml

# Naïve Ansible playbook (INTENTIONALLY VULNERABLE)

---

- hosts: app

vars:

new_dir: "{{ new_dir | default('/tmp/uploads') }}" # can be overridden in inventory

tasks:

- name: Create user-specified folder # <-- shell w/ unquoted var

shell: mkdir -p {{ new_dir }}

become: yes

- name: Copy artefacts

copy:

src: "{{ build_dir | default('./build/') }}"

dest: "{{ new_dir }}"

become: yes
 - name: Restart service # <-- runs as root, no become_user

service:

name: myapp

state: restarted

become: yes

```

Code Generation / Completion

“Write the boilerplate—or the whole function—for me.”

Aspect

What it means

Goal

Produce new code that satisfies the user’s description or finishes partially written code.

Typical inputs

• Natural-language spec (“build a REST endpoint in Flask”).

• Starter skeleton with TODO blocks.

• Interface definition or type signature.

• Examples of desired I/O.

Typical outputs

• Fully fleshed-out function, class, module, or script.

• Auto-completed snippets that compile/run.

• Inline comments explaining major steps (optional).

Focus areas

Correctness, idiomatic style for the chosen language, minimal external dependencies unless requested,
compliance with provided patterns or frameworks.

Granularity

Anything from a single line (“complete this list comprehension”) to a multi-file scaffold (“generate CRUD
API with tests”).

Audience

Developers who want rapid prototyping, boilerplate avoidance, or inspiration for tricky logic; educators
demonstrating patterns.

Examples

Algorithms & Data Structures — Rust

Implement the missing body of

fn topological_sort(graph: &HashMap<String, Vec<String>>) -> Result<Vec<String>, CycleDetected>

in dag.rs.

Use Kahn’s algorithm.

If a cycle exists, return Err(CycleDetected).

Add unit tests in dag_tests.rs (cargo test) that cover:

a simple DAG,

a graph with multiple valid orders,

detection of a cycle.

Keep time complexity ≤ O(|V| + |E|) and memory complexity ≤ O(|V| + |E|).

```rust

//! dag.rs

//! -------------------------------------------

//! A tiny DAG-utility module used in examples.

//! The job: complete `topological_sort` using

//! Kahn's algorithm (O(|V| + |E|)), plus proper

//! cycle detection.

//

//! -------------------------------------------

use std::collections::{HashMap, VecDeque};

/// Error returned when the input graph contains at least one cycle.

#[derive(Debug, Clone, PartialEq, Eq)]

pub struct CycleDetected;

/// Perform a topological sort on a directed acyclic graph.

///

/// # Arguments

/// * `graph` - adjacency list where each key maps to the list of its outgoing-edge targets.

///

/// # Returns

/// * `Ok(order)` - a vector of node IDs in a valid topological order.

/// * `Err(CycleDetected)` - if the graph has a cycle.

///

/// # Complexity

/// Must run in **O(|V| + |E|)** time and use **O(|V| + |E|)** additional memory.

pub fn topological_sort(

graph: &HashMap<String, Vec<String>>,

) -> Result<Vec<String>, CycleDetected> {

// ---------- IMPLEMENT ME ----------

//

// Replace the line below with a Kahn-style implementation:

// 1. Compute indegrees.

// 2. Push all 0-indegree nodes into a queue.

// 3. Repeatedly pop, add to ordering, decrement neighbors' indegrees,

// pushing new 0-indegree nodes.

// 4. If |ordering| < |V| at the end ⇒ cycle.

//

// Return Err(CycleDetected) on cycle.

//

todo!("topological_sort is not yet implemented")

/* ---------------------------------------------------------------- */
#[cfg(test)]

mod tests {

use super::*;

use std::iter::FromIterator;

fn make_graph(edges: &[(&str, &[&str])]) -> HashMap<String, Vec<String>> {

HashMap::from_iter(edges.iter().map(|(src, dsts)| {

(src.to_string(), dsts.iter().map(|s| (*s).into()).collect())

}))

#[test]

fn simple_dag() {

// TODO: replace with a real assertion once topological_sort works

let g = make_graph(&[("A", &["B"]), ("B", &["C"]), ("C", &[])]);

let _ = g;

// let order = topological_sort(&g).unwrap();

// assert_eq!(order.len(), 3);

#[test]

fn multiple_valid_orders() {

// TODO

#[test]

fn detects_cycle() {

// TODO
 }

```

Code Edit – Corrective

“Make the broken code work.”

Aspect

What it means

Goal

Diagnose and fix errors, crashes, failing tests, incorrect results, or mis-handled edge cases.

Typical inputs

• Error trace or failing unit-test log.

• Bug reproduction steps.

• Source file or diff containing the fault.

Typical outputs
• Patched code that compiles/runs and passes provided tests.

• A short explanation of the root cause and the applied fix.

Focus areas

Logic mistakes, off-by-one errors, null-pointer access, wrong API usage, incorrect type conversions, race
conditions.

Granularity

From a single line change to a focused patch touching a few related files.

Audience

Developers actively debugging; QA engineers verifying fixes.

Example

Data Analytics — Python + pandas + NumPy

The quantile_normalize function intermittently returns NaNs when run in parallel on large DataFrames.

Debug and patch it so the result exactly matches the single-threaded reference output for all inputs ≤ 1
GB.

Provide a short post-mortem describing root cause and test evidence.

```python

"""

quantile_normalize.py

"""

import multiprocessing as mp

from itertools import islice

import numpy as np

import pandas as pd

def _qn_single(chunk: pd.DataFrame) -> pd.DataFrame:

"""Single-thread quantile normalisation of one chunk."""

ranked = chunk.stack().groupby(chunk.rank(method="first").stack().astype(int)).mean()

return chunk.rank(method="min").stack().astype(int).map(ranked).unstack()

def _chunks(df: pd.DataFrame, size: int):

"""Yield successive row slices of the DataFrame."""

it = iter(range(0, len(df), size))

for start in it:

yield df.iloc[start : start + size]

def quantile_normalize(

df: pd.DataFrame, *, n_workers: int = 4, chunk_size: int = 100_000

) -> pd.DataFrame:

"""

Parallel quantile normalisation (BUGGY!).

 Parameters

----------

df : pd.DataFrame

Input numeric DataFrame.

n_workers : int

Degree of parallelism (default 4).

chunk_size : int

Rows per chunk (default 100 k).

Returns

-------

pd.DataFrame

Quantile-normalised DataFrame. **BUG:** may contain NaNs.

"""

if n_workers <= 1 or len(df) <= chunk_size:

return _qn_single(df)

with mp.Pool(processes=n_workers) as pool:

partials = pool.map(_qn_single, list(_chunks(df, chunk_size)))

normalised = pd.concat(partials)

return normalised.loc[df.index]

```

Code Edit – Perfective

“Make the code better, not just correct.”

Aspect
What it means

Goal

Refactor or optimise code to improve readability, maintainability, performance, or stylistic conformity—

without changing external behaviour.

Typical inputs

• Working but “smelly” code (deep nesting, duplication, magic numbers).

• Performance profile pinpointing hotspots.

• Project style guide.

Typical outputs

• Cleaner structure (functions split, variables renamed, duplication removed).

• More efficient algorithm or data structure.• Added/updated docstrings and comments.

Focus areas

Big-O improvements, removal of dead code, extracting reusable modules, applying design patterns,
conforming to lint rules.

Granularity

May span many files if a sweeping refactor is required.

Audience

Teams planning long-term maintenance, performance engineers, code-quality gatekeepers.

Example

Database Management — PL/SQL

usp_generate_invoice intermittently throws ORA-01403: no data found when called from the nightly
job. Debug and patch the procedure so it handles missing customer rows gracefully and logs anomalies
to invoice_errors. Provide a one-paragraph root-cause explanation and a script that recreates the failing
case.

```sql

CREATE OR REPLACE PROCEDURE usp_generate_invoice (

p_customer_id IN customers.customer_id%TYPE,

p_order_id IN orders.order_id%TYPE,

p_inv_id OUT invoices.invoice_id%TYPE

) AS

l_customer customers%ROWTYPE;

l_order orders%ROWTYPE;

BEGIN

----------------------------------------------------------------

-- 1. Fetch customer record

----------------------------------------------------------------

SELECT *

INTO l_customer

FROM customers

WHERE customer_id = p_customer_id;

----------------------------------------------------------------

-- 2. Fetch order record

----------------------------------------------------------------

SELECT *

INTO l_order

FROM orders

WHERE order_id = p_order_id

AND customer_id = p_customer_id;

----------------------------------------------------------------

-- 3. Create invoice

----------------------------------------------------------------

INSERT INTO invoices (

invoice_id,

customer_id,

order_id,

inv_date,

amount

VALUES (

invoices_seq.NEXTVAL,

l_customer.customer_id,

l_order.order_id,

SYSDATE,

l_order.total_price

RETURNING invoice_id INTO p_inv_id;

 COMMIT;

END usp_generate_invoice;

```

Code Edit – Adaptive

“Change its purpose or context, keep its soul.”

Aspect

What it means

Goal

Alter existing functionality to satisfy new requirements or integrate with a different environment/API
while preserving core logic.

Typical inputs

• Legacy function plus new specification (“must accept JSON instead of XML”).

• Library upgrade that changes method signatures.

• Migration plan (e.g. on-prem ↔ cloud).

Typical outputs
• Modified code compatible with the new context.

• Adapter/wrapper layers.

• Backwards-compatibility shims when required.

Focus areas

Interface changes, data-format conversions, environment specifics (e.g. POSIX→Windows), dependency

injection for easier re-use.

Granularity

From a small parameter-list tweak to a full module rewrite that plugs into a new framework.

Audience

Developers tasked with feature upgrades, integration engineers, migration teams.

Example

Data Visualization — Python + Matplotlib

report_plot.py rebuilds the same 80 k-row DataFrame three times. Refactor to compute once, cache in
memory, and rewrite the plotting section to use seaborn’s lineplot, reducing runtime from 25 s to < 5 s.
Keep CLI behaviour intact; update docstring and add a benchmark in README.md

```python

#!/usr/bin/env python3

import argparse
import time

import pandas as pd

import matplotlib.pyplot as plt

def _load_raw(path: str) -> pd.DataFrame:

"""Read CSV and parse the timestamp column."""

return pd.read_csv(path, parse_dates=["timestamp"])

def _build_latency_df(path: str) -> pd.DataFrame:

df = _load_raw(path)

df["hour"] = df["timestamp"].dt.floor("h")

return (

df.groupby("hour")["latency_ms"].mean().reset_index(name="latency_ms")

def _build_requests_df(path: str) -> pd.DataFrame:

df = _load_raw(path)

df["hour"] = df["timestamp"].dt.floor("h")

return (

df.groupby("hour")["request_id"].count().reset_index(name="requests")

def _build_errors_df(path: str) -> pd.DataFrame:

df = _load_raw(path)

df["hour"] = df["timestamp"].dt.floor("h")
 return (

df[df["is_error"] == 1]

.groupby("hour")["is_error"]

.count()

.reset_index(name="errors")

# ----------------------------------------------------------------------

# Plotting functions (Matplotlib) --------------------------------------

# ----------------------------------------------------------------------

def _plot_latency(ax, df):

ax.plot(df["hour"], df["latency_ms"], color="steelblue", label="Latency (ms)")

ax.set_ylabel("Latency (ms)")

ax.legend(loc="upper left")

def _plot_requests(ax, df):

ax.plot(df["hour"], df["requests"], color="seagreen", label="Requests")

ax.set_ylabel("Requests")

ax.legend(loc="upper left")

def _plot_errors(ax, df):

ax.plot(df["hour"], df["errors"], color="firebrick", label="Errors")

ax.set_ylabel("Errors")

ax.legend(loc="upper left")
# ----------------------------------------------------------------------

# Main CLI entry point --------------------------------------------------

# ----------------------------------------------------------------------

def main() -> None:

t0 = time.time()

parser = argparse.ArgumentParser(description="Generate daily report plot")

parser.add_argument("--input", required=True, help="Input CSV path")

parser.add_argument("--output", default="report.png", help="Output PNG path")

args = parser.parse_args()

latency_df = _build_latency_df(args.input)

requests_df = _build_requests_df(args.input)

errors_df = _build_errors_df(args.input)

# --- Render with Matplotlib ----------------------------------------

fig, axes = plt.subplots(nrows=3, ncols=1, figsize=(11, 12), sharex=True)

_plot_latency(axes[0], latency_df)

_plot_requests(axes[1], requests_df)

_plot_errors(axes[2], errors_df)

axes[2].set_xlabel("Hour")

plt.tight_layout()

fig.savefig(args.output, dpi=150)

print(f"Generated {args.output} in {time.time() - t0:0.2f}s")

if __name__ == "__main__":

main()
```

Code Search

“Point me to the code that already exists.”

Aspect

What it means

Goal

Identify and return the exact snippet(s) inside a supplied codebase that match a description, keyword,
signature, or behavior—no new code written.

Typical inputs

• Repository tree or multi-file excerpt.

• Diff, patch, or single long file.

• Natural-language query (“find the function that hashes passwords with bcrypt”).

Typical outputs

• File path + line numbers + extracted snippet.

• Brief note on why it matches (optional).

Focus areas

Function names, class definitions, API endpoints, SQL queries, regex patterns—anything already present
that fulfills the search intent.

Granularity

Ranges from one-line constants to whole modules, depending on specificity.

Audience

Developers navigating large repositories, reviewers checking for duplicates, auditors verifying
compliance.

Example

Mobile App Development — Swift (iOS)

Context — MyFinance iOS project

(file excerpts provided; each block begins with the file path)

```swift

// MyFinance/Services/KeychainService.swift

import Security

final class KeychainService {

@discardableResult

func savePassword(_ pwd: String, for account: String) -> Bool {

 let data = pwd.data(using: .utf8)!

let query: [String: Any] = [

kSecClass as String: kSecClassGenericPassword,

kSecAttrAccount as String: account,

kSecValueData as String: data

// write

let status = SecItemAdd(query as CFDictionary, nil)

return status == errSecSuccess

@discardableResult

func overwritePassword(_ pwd: String, account: String) -> Bool {

let query: [String: Any] = [

kSecClass as String: kSecClassGenericPassword,

kSecAttrAccount as String: account

let attrs: [String: Any] = [kSecValueData as String: pwd.data(using: .utf8)!]

// write (update)

let status = SecItemUpdate(query as CFDictionary, attrs as CFDictionary)

return status == errSecSuccess

```

```swift

// MyFinance/Onboarding/AuthManager.swift

import Security
class AuthManager {

private let service = KeychainService()

func saveCredentials(email: String, password: String) {

_ = service.savePassword(password, for: email) // delegates, still counts

```

```swift

// MyFinance/Utilities/TokenStorage.swift

import Security

struct TokenStorage {

static func storeRefreshToken(_ token: String) {

let query: [String: Any] = [

kSecClass as String: kSecClassGenericPassword,

kSecAttrService as String: "refresh-token",

kSecValueData as String: Data(token.utf8)

// direct write

SecItemAdd(query as CFDictionary, nil)

```
Locate every function that writes to the Keychain.

Treat any call to SecItemAdd or SecItemUpdate as a write.

For each occurrence, return:

File path

Function signature

Five lines before and after the write call (or the closest you can).

Output as a Markdown list.

Test Case Generation

“Write tests so the code stays fixed (or the bug is reproducible).”

Aspect

What it means

Goal

Produce automated tests—unit, integration, or end-to-end—that verify current behavior or reproduce a

reported defect.

Typical inputs

• Source code or API spec.

• Bug description/reproduction steps.

• Framework constraints (e.g., “use PyTest”, “Jest for React”).

Typical outputs
• Test files/functions with assertions.

• Stub data, mocks, fixtures.

• Comments on coverage and edge cases.

Focus areas

Boundary values, error handling, regression paths, performance thresholds (if measurable), security
edge-cases.

Granularity

Single function tests up to scenario-based suites that hit multiple services.

Audience

QA engineers, developers enforcing CI gates, SREs safeguarding against regressions.

Example

Game Development — C++ (Unreal Engine)

Generate GoogleTest unit tests for AStarPathfinder::findPath to cover: unreachable target, diagonal
movement allowed, tile with zero cost, and map size > 10 000 nodes. Provide a fixture that loads
sample_map.json and assert that result.TotalCost matches a pre-computed baseline you derive inside
the test.

Return only the new test source file (AStarPathfinderTests.cpp). Do not modify the stub implementation.
```cpp

// Source/MyGame/AI/AStarPathfinder.h

#pragma once

#include "CoreMinimal.h"

/** Tile-based A* stub. Cost 0 == blocked. */

class AStarPathfinder

public:

struct FTile { int32 Cost; };

struct FResult

TArray<FIntPoint> Path; // empty if unreachable

int32 TotalCost = 0;

};

AStarPathfinder(const TArray<TArray<FTile>>& InGrid,

bool bAllowDiagonal);

/** TODO: implement */ // ← you will *not* implement it

FResult FindPath(const FIntPoint& Start,

const FIntPoint& Goal) const;

private:

int32 Width = 0;

int32 Height = 0;

bool bDiag = false;

TArray<TArray<FTile>> Grid;
};

```

```cpp

// Source/MyGame/AI/AStarPathfinder.cpp

#include "AStarPathfinder.h"

AStarPathfinder::AStarPathfinder(

const TArray<TArray<FTile>>& InGrid, bool bAllowDiagonal)

: Grid(InGrid), bDiag(bAllowDiagonal)

Height = Grid.Num();

Width = Height ? Grid[0].Num() : 0;

AStarPathfinder::FResult

AStarPathfinder::FindPath(const FIntPoint& /*Start*/,

const FIntPoint& /*Goal*/) const

return {};

```

```json

// Content/Sample/sample_map.json

"width": 5,

"height": 5,
"grid": [

[1, 1, 1, 1, 1],

[1, 0, 1, 0, 1],

[1, 1, 5, 1, 1],

[1, 0, 1, 0, 1],

[1, 1, 1, 1, 1]

```

Code Summarization

“Give me the story of the code.”

Aspect

What it means

Goal

Condense one or more changes or a whole file into a short, human-readable narrative.

Typical inputs

• Two versions of a file (before / after).

• A commit diff or pull-request diff.

• A complete script whose high-level purpose must be stated in a paragraph.

Typical outputs

• A one-line commit title plus a multi-line body (conventional commit style, GitHub default, etc.).

• A “changelog” bullet.

• An executive summary paragraph at the top of a script (“This tool crawls… then exports…”).

Focus areas

What changed and why it matters at a bird’s-eye level—features added, bugs fixed, refactors,
performance gains.

Granularity

File-level or repo-level. Rarely discusses individual lines unless they illustrate a major change.

Audience

Reviewers, future maintainers, project managers—anyone who wants to grasp scope & intent quickly.

Examples

ML / AI Foundations — MATLAB

Read cnn_training_script.m, augment.m, and train_options.json. Produce a 5-line summary for the
project wiki: dataset used, augmentation steps, model architecture, training hyper-params, and
expected accuracy. Begin with a one-sentence overview, then four bullets.
cnn_training_script.m

```matlab

% cnn_training_script.m

% -------------------------------------------------------------

% Minimal CNN training demo for the "MyCancerCells" dataset.

% Loads augmentation logic from augment.m and training options

% from train_options.json.

% -------------------------------------------------------------

clear; clc;

%% 1) Dataset

dataDir = fullfile(pwd, "MyCancerCells"); % folder with sub-dirs per class

imds = imageDatastore(dataDir, ...

"IncludeSubfolders", true, ...

"LabelSource", "foldernames");

%% 2) Augmentation pipeline (custom helper)

augImds = transform(imds, @(data) augment(data), ...

"IncludeInfo", true);

%% 3) Network architecture (tiny CNN)

layers = [

imageInputLayer([64 64 3],"Normalization","zerocenter")

convolution2dLayer(3,16,"Padding","same")

batchNormalizationLayer

reluLayer
 maxPooling2dLayer(2,"Stride",2)

convolution2dLayer(3,32,"Padding","same")

batchNormalizationLayer

reluLayer

fullyConnectedLayer(numel(unique(imds.Labels)))

softmaxLayer

classificationLayer

];

%% 4) Training options (load from JSON)

optsJson = jsondecode(fileread("train_options.json"));

options = trainingOptions(optsJson.optimizer, ...

"InitialLearnRate", optsJson.learningRate, ...

"MiniBatchSize", optsJson.batchSize, ...

"MaxEpochs", optsJson.epochs, ...

"Shuffle", "every-epoch", ...

"ValidationFrequency", 50, ...

"Plots", "training-progress", ...

"Verbose", false);

%% 5) Train

net = trainNetwork(augImds, layers, options);

%% 6) Save + quick eval

save("trained_cnn.mat","net");

pred = classify(net, augImds);

acc = mean(pred == imds.Labels);

fprintf("Validation accuracy: %.2f%%\n", acc*100);

```

augment.m

```matlab

function dataOut = augment(dataIn)

% augment.m

% Simple on-the-fly augmentation used by cnn_training_script.m

% -----------------------------------------------------------

img = dataIn{1};

% Random horizontal flip

if rand < 0.5

img = fliplr(img);

end

% Random rotation (-15° ... +15°)

rotAngle = (rand*30) - 15;

img = imrotate(img, rotAngle, 'bilinear', 'crop');

% Random brightness jitter (±20 %)

jitter = 0.8 + 0.4*rand;

img = im2uint8( im2double(img) .* jitter );

dataOut = {img, dataIn{2}}; % keep label unchanged

end

```

train_options.json

```json

"optimizer": "adam",

"learningRate": 0.0005,

"batchSize": 64,

"epochs": 25,

"expectedAccuracy": 0.92

```

Mnemonic: Summarization = “chapter blurb” for code or diffs.

Code Explanation

“Teach me how this code works.”

Aspect

What it means

Goal
Provide a line-by-line or section-by-section walkthrough of existing code so the reader understands
logic, data flow, I/O, edge-cases.

Typical inputs

• A function, method, SQL query, class, or small script.

Typical outputs

• In-line comments or docstrings.

• A prose explanation (“Step 1 fetches data… Step 2 filters… Step 3 returns a DataFrame”).

Focus areas

How it works, why each step exists, constraints, corner-cases, Big-O, side-effects.

Granularity

Statement-level or block-level. May reference specific variables or conditions.

Audience

Developers tasked with maintenance, debugging, or extension; juniors learning the codebase.

Examples

Scripting & Automation Tools — PowerShell

Add inline comments and a comment-based help block to Rotate-IIS-Logs.ps1. Explain why `Get-
ChildItem -Path $logDir -Filter *.log

```powershell

# Rotate-IIS-Logs.ps1

param (

[string]$LogDir = "C:\inetpub\logs\LogFiles\W3SVC1",

[int] $DaysToKeep = 30,

[switch]$ZipArchives

$now = Get-Date

$cutoff = $now.AddDays(-$DaysToKeep)

$logFiles = Get-ChildItem -Path $LogDir -Filter *.log | Where-Object {

$_.LastWriteTime -gt $cutoff

$archiveDir = Join-Path $LogDir "Archive"

if (-not (Test-Path $archiveDir)) {

New-Item -ItemType Directory -Path $archiveDir | Out-Null

foreach ($file in $logFiles) {

$dest = Join-Path $archiveDir $file.Name

if ($ZipArchives) {

$zipPath = "$dest.zip"

Compress-Archive -Path $file.FullName -DestinationPath $zipPath -Update

Remove-Item $file.FullName

} else {

Move-Item -Path $file.FullName -Destination $dest

}
}

Get-ChildItem -Path $archiveDir | Where-Object {

$_.LastWriteTime -lt $cutoff

} | Remove-Item -Force

```

Mnemonic: Explanation = “guided tour” through the code’s internals.

Code Review

“Judge this code—does it do the right thing and do it the right way?”

Aspect

What it means

Goal

Evaluate a change set or new file against correctness, style guidelines, architecture, performance,
security, and maintainability.

Typical inputs

• Pull-request diff, commit diff, or patch.

• Link to a file or snippet plus the project’s style guide/requirements.

Typical outputs
• Inline review comments (“nit: rename idx → index”).

• A summary verdict (approve / request changes) with a checklist of issues.

• Suggested refactors, alternative algorithms, or best-practice links.

Focus

Find problems and offer improvements.- Logic errors & failing edge-cases- Consistency with project
conventions (naming, formatting, tests)- Security flaws / resource leaks- Performance hot-spots-
Readability & documentation quality

Granularity

Line-level for nits, block-level for algorithmic concerns, file-level for architecture.

Audience

Authors of the PR, other reviewers, CI gatekeepers; anyone deciding whether to merge the change.

Examples

Back-end Development — Go (HTTP microservice)

Review handlers/user.go and middleware/auth.go for correctness, concurrency safety, standard Go

style, and latency impact. The team targets < 50 ms p95 for /user/profile. Note violations of Effective Go
naming, suggest improvements, and give an Approve/Request-Changes verdict.

```go

// handlers/user.go
package handlers

import (

"encoding/json"

"net/http"

"time"

// User represents a user profile in memory.

type User struct {

ID string `json:"id"`

Email string `json:"email"`

FirstName string `json:"first_name"`

LastName string `json:"last_name"`

CreatedAt time.Time `json:"created_at"`

// in-memory store (shared across goroutines; no mutex → possible race)

var userStore = map[string]*User{}

// ProfileHandler handles GET /user/profile?id={id}

func ProfileHandler(w http.ResponseWriter, r *http.Request) {

start := time.Now()

id := r.URL.Query().Get("id")

if id == "" {

http.Error(w, "missing id param", http.StatusBadRequest)

return

}
 u := userStore[id]

if u == nil {

http.NotFound(w, r)

return

js, err := json.Marshal(u) // heavy alloc; could reuse encoder

if err != nil {

http.Error(w, "json encode error", http.StatusInternalServerError)

return

// naive latency check (side effect -- ignored in tests)

lat := time.Since(start)

if lat > 50*time.Millisecond {

// silently continue; just log in future

w.Header().Set("Content-Type", "application/json")

w.Write(js)

// SeedUsers is invoked at startup with initial data

func SeedUsers(list []*User) {

for _, u := range list {

userStore[u.ID] = u

```
```go

// middleware/auth.go

package middleware

import (

"context"

"net/http"

"strings"

type ctxKey int

const keyUser ctxKey = 0 // non-exported; okay

// Authenticate verifies Authorization: Bearer <token> header

func Authenticate(next http.Handler) http.Handler {

return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {

auth := r.Header.Get("Authorization")

if auth == "" {

http.Error(w, "missing auth header", http.StatusUnauthorized)

return

parts := strings.Split(auth, " ")

if len(parts) != 2 || parts[0] != "Bearer" {

http.Error(w, "bad auth header", http.StatusUnauthorized)

return
 }

userID, ok := slowVerifyToken(parts[1]) // external call; can block

if !ok {

http.Error(w, "invalid token", http.StatusUnauthorized)

return

// store userID in context for downstream handlers

ctx := context.WithValue(r.Context(), keyUser, userID)

next.ServeHTTP(w, r.WithContext(ctx))

})

// slowVerifyToken: stand-in for real auth service

func slowVerifyToken(tok string) (string, bool) {

// TODO: call remote auth service with timeout; dummy impl for now

if tok == "good" {

return "123", true

return "", false

```

Mnemonic: Review = “critique”.