Skip to content
Oak National Academy
Oak National Academy
View my library
0
Teachers
Pupils
New
New
Year 11
OCR

Web based project II

I can make my website interactive using JavaScript and test that it meets the requirements specified.

Download all resources
Share activities with pupils
New
New
Year 11
OCR

Web based project II

I can make my website interactive using JavaScript and test that it meets the requirements specified.

Download all resources
Share activities with pupils

These resources will be removed by end of Summer Term 2025.

Switch to our new teaching resources now - designed by teachers and leading subject experts, and tested in classrooms.

These resources were created for remote use during the pandemic and are not designed for classroom teaching.

View new resources

Lesson details

Key learning points

  1. Adding interactivity to a project involves writing functions and connecting them to elements using event listeners.
  2. Website features should match the project’s goals and user needs.
  3. Testing and debugging your code is a key part of any project.

Keywords

  • Debugging - the process of finding and fixing errors in code to ensure it works correctly

  • Testing - checking your website to make sure all pages, links and features work as expected

  • Rubric - a guide that outlines criteria and levels of achievement to evaluate work fairly and consistently

Common misconception

JavaScript only works after everything is perfect, I’ll fix it all at the end.

JavaScript is best written and tested in small steps. Writing a little, testing it, and debugging as you go helps avoid big problems later.


To help you plan your year 11 computer science lesson on: Web based project II, download all teaching resources for free and adapt to suit your pupils' needs...

Pupils will have encoutered many uses of HTML in the world around them. Tailor the activities in the slides to best reflect the experiences pupils in your school will have had when using HTML-based technology.
Teacher tip

Equipment

Access to the Raspberry Pi Foundation's Code Editor or some other means of creating HTML files.

Licence

This content is © Oak National Academy Limited (2025), licensed on Open Government Licence version 3.0 except where otherwise stated. See Oak's terms & conditions (Collection 2).

Lesson video

Skip lesson video

Loading...

Prior knowledge starter quiz

Download quiz pdf

6 Questions

Q1.
What are user requirements?
Correct answer: the target audience’s needs for a product
the coding language used for styling
a type of website navigation tool
the visual design of a website
Q2.
Match each web design term to its example:
Correct Answer:<header>,semantic HTML

semantic HTML

Correct Answer:planning the layout of a page,wireframe

wireframe

Correct Answer:easy to read text phone screen,user requirement

user requirement

Correct Answer:styling the background colour of a page,CSS

CSS

Q3.
What does CSS do for a website?
provides the structure for each page
Correct answer: creates consistent styling
helps define user requirements
plans the navigation layout
Q4.
What is used to plan the structure and navigation of a website before coding begins?
Correct Answer: wireframe, wire frame
Q5.
What is the purpose of a site map?
to style a website
to define user requirements
to add semantic elements
Correct answer: to plan the navigation structure
Q6.
Arrange the steps for creating consistent styling:
1 - Review the original design plan.
2 - Write CSS rules.
3 - Apply the CSS to HTML elements.
4 - Test the design.

Assessment exit quiz

Download quiz pdf

6 Questions

Q1.
What is testing in web development?
writing JavaScript for interactivity
debugging code to fix errors
Correct answer: checking that all pages, links and features work
comparing a website to its user requirements
Q2.
What is the process of finding and fixing errors in code?
Correct Answer: debugging
Q3.
How does JavaScript add interactivity to a website?
by styling elements on a page
Correct answer: by connecting functions to elements using event listeners
by creating the structure of a page
by fixing errors in the code
Q4.
Arrange the steps for debugging code:
1 - Identify the error in the code.
2 - Fix the identified error.
3 - Test the fix to ensure that it works.
4 - Test the code to check for other errors.
Q5.
What is a guide that outlines criteria and levels of achievement to evaluate work fairly?
Correct Answer: rubric
Q6.
What is the best way to write and test JavaScript?
Write all the code first, then test it at the end.
Debug only after all the code is finished.
Test the code only if it doesn’t work.
Correct answer: Write and test small parts of code step by step.

Additional material

Download additional material