04 APIs and mini projects: challenges

Find the point where the async function reaches await.

The function logs entry 1, then awaits its timer promise. The listener continues with entry 2. Fulfilment or rejection produces entry 3, then finally produces entry 4. Other event callbacks can run while it awaits.

One handles the rejected outcome; one restores state on either route.

catch displays the simulated failure. finally releases the running flag and disabled button. The same promise does not later become successful; a new click starts a new attempt.

The returned Response is not the final array.

fetch yields a Response. Check ok, then await json and validate the parsed records. Only then render the three clubs with safe text nodes.

HTTP response, parsing and app validation are distinct.

A normal missing file gives a non-2xx response rejected by the explicit ok check. Malformed JSON fails json parsing. The wrong-shaped object parses but fails isClubList. Check your actual server’s response because fallback pages can use status 200.

Clear old output and treat [] according to the contract.

No old club items remain. The empty list is valid and the status says it loaded successfully with no clubs. Finally must still restore the button and aria-busy state.

Look at both the guard and finally.

A new invocation returns while loading is true. The button is also disabled for normal use. AbortController cancels an unfinished operation after the timer fires; finally clears the timer and restores state. This is not a complete search-as-you-type race strategy.

The answered boolean is the logic guard.

The repeated submission does not add another point. A missing selection gives guidance and leaves answered false. Each authored question has one correct option and one scoring opportunity.

Reset all state and rebuild enabled options.

The summaries should show 5/5 and 0/5. Restart returns to question 1 and clears the score. No out-of-range question should be read after the final answer.

Indexes shift; stable IDs identify records.

The intended row is removed, new IDs do not collide and counts match completion. The checkbox updates the task record and the visible span without replacing its focused control.

Visible output does not prove the write succeeded.

Successful changes survive reload. Failed writes leave the page’s current task visible but show a not-saved warning. Reload may restore the older saved list; report that limit honestly.

Do not overwrite unreadable saved data automatically.

Loading warns and disables persistence. Adding a temporary task keeps the unreadable entry intact. Forget removes this key only and re-enables saving; tasks stay in memory, and the next task change saves the current list again.

Start with the completed quiz, replacing its fixed question array with a loaded bank.

The complete download contains the working integration. Its validation checks a non-empty bounded array, prompt/options text, an in-range integer answer index and explanation text. It cannot prove that the authored correct answer is factually correct; review the questions too.

The loader added to the quiz

const loadButton = document.querySelector("#quiz-load");
let bankLoading = false;
function validQuestionBank(value) {
  return Array.isArray(value) && value.length >= 1 && value.length <= 20 && value.every((q) =>
    q !== null && typeof q === "object" && !Array.isArray(q)
    && typeof q.prompt === "string" && q.prompt.trim() !== "" && q.prompt.length <= 250
    && Array.isArray(q.options) && q.options.length >= 2 && q.options.length <= 6
    && q.options.every((option) => typeof option === "string" && option.trim() !== "" && option.length <= 150)
    && Number.isInteger(q.answer) && q.answer >= 0 && q.answer < q.options.length
    && typeof q.explanation === "string" && q.explanation.trim() !== "" && q.explanation.length <= 500
  );
}
async function loadQuiz() {
  if (bankLoading) return;
  bankLoading = true;
  loadButton.disabled = true;
  form.hidden = true;
  summary.hidden = true;
  progress.textContent = "Loading question bank...";
  feedback.textContent = "";
  const controller = new AbortController();
  const timeout = setTimeout(() => controller.abort(), 8000);
  try {
    const response = await fetch("./questions.json", { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const value = await response.json();
    if (!validQuestionBank(value)) throw new Error("Invalid question bank");
    questions = value;
    index = 0;
    score = 0;
    form.hidden = false;
    loadButton.hidden = true;
    renderQuestion();
    optionsBox.querySelector("input").focus();
  } catch (error) {
    progress.textContent = "Question bank unavailable.";
    feedback.textContent = "Check the local server, HTTP response and JSON structure, then try loading again.";
    loadButton.textContent = "Retry loading quiz";
    loadButton.hidden = false;
  } finally {
    clearTimeout(timeout);
    bankLoading = false;
    loadButton.disabled = false;
  }
}
form.hidden = true;
progress.textContent = "Select Load quiz to begin.";
loadButton.addEventListener("click", loadQuiz);

This loader is not a standalone script. In the complete project, questions is declared with let as an empty array, the form starts hidden, a Load quiz button is present, and the original immediate renderQuestion() call is removed. The download includes those changes together.

Test valid loading, a 404 or server fallback, malformed JSON, an out-of-range answer index, retry after repair and a complete restarted attempt. The question bank is browser-visible practice data, not a hidden examination mark scheme.