Preview

The whole resource, exactly as a class sees it. Answers and marking are held back.

JavaScript and DOM interaction

JavaScript supplies behaviour. At OCR depth, familiar variables, arrays, selection, iteration and functions are connected to browser input/output. Exact syntax is not a memory test, but the intended logic and page-element state must be precise.

Read, process, write

The browser represents the page as elements that JavaScript can locate by ID. getElementById returns the matching element. Its value can supply input; its innerHTML can be read or changed. The variable state and page state are connected but not identical.

Worked trace

function showDistance() {
  paces = document.getElementById("paces").value;
  total = paces * 2;
  document.getElementById("result").innerHTML = total;
  return total;
}

If the input value is 4, paces becomes 4, total becomes 8, the result element displays 8 and the function returns 8. Returning a value and displaying it are two different actions.

OCR also recognises output through alert(...) and document.write(...). A question may supply either, so students should read them. The DOM route remains the main practical model here because it makes the target element and state change explicit. The exact form-input method does not have to be memorised when a question supplies or explains it.

Multiple choice1 mark

The HTML contains <p id="output"></p>. Which argument correctly completes document.getElementById(____)?

A`"result"`
B`.output`
C`"output"`
D`#output`

Fill in the blanks4 marks

For values = [3, 5, 2], a loop with index i from 0 to 2 adds values[i] to total. The first item is gap 1, the final total is gap 2, and the number of iterations is gap 3. To display it in element id result, assign to its gap 4.

3
10
2
innerHTML
href

Written answer8 marks

Trace the worked showDistance function when paces is 7. Record paces, total, displayed result and returned value. Then explain what happens if the HTML id is changed to distance but the JavaScript lookup remains paces.

Separate program variables, DOM state and returned state.

Students type their answer here.

Apply the model independently

The remaining tasks change the context or reduce the support. Complete them without copying the worked model, then check that each explanation connects a mechanism to its consequence.

Written answer8 marks

Amend showDistance so it displays Long route in element id message when total is greater than 20, otherwise displays Short route. Preserve the numeric result and return value.

Use selection after total is calculated. Several equivalent structures are valid.

Students type their answer here.

Written answer10 marks

Write a JavaScript function countReady(ids) that loops through an array of element IDs, reads each element's innerHTML, counts entries equal to ready, displays the count in element id readyTotal, and returns the count.

Use an accumulator initialised before the loop and an index used with ids.

Students type their answer here.

Fill in the blanks4 marks

JavaScript can locate a page element by its checkpoint gap 1. The element input can be read through value or checkpoint gap 2. Selection chooses a branch; iteration checkpoint gap 3 steps. Displaying and checkpoint gap 4 a value are distinct.

Review your understanding

Before submitting, check that you can explain the main distinction in your own words, apply it in an unfamiliar context and justify each consequence rather than only naming a feature.