Lesson video

Hi everyone, my name is Mrs. Welsh.

Today we'll be learning about how to test and evaluate a web-based project.

This is lesson two of two.

Don't worry if this is new to you, I'll be guiding you through each step.

So let's get started.

Welcome to today's lesson from the unit HTML Programming Project.

This lesson is called Web-based Project Part Two.

By the end of today's lesson, you'll be able to include interactivity on your website, test and evaluate your website against the user requirements.

But before we get started, let's take a look at some of the keywords that will be included in today's lesson.

Debugging, the process of finding and fixing errors in code to ensure that 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 your work fairly and consistently.

In today's lesson, we're going to be looking at how to create some interactivity using JavaScript, debug code to improve user experience and compare a website to user requirements.

Today we're gonna start with creating interactivity using JavaScript.

So let's get going.

We use JavaScript on a website to add interactivity, allowing the user to interact with the content.

This could be the click of a button or a mouse rollover.

By adding interactivity, it enhances the user experience by improving usability, supporting learning, providing feedback, and generally engaging the user.

Some of the common interactive elements we might find on a website are: The show/hide feature, this reveals or hides content when a button or a heading is clicked.

We would use this because it allows us to keep the webpage tidy, particularly if we have a lot of content as it reduces clutter and allows the user to focus on maybe one piece of text at a time.

We have what's called the accordion menu, and this expands or collapses a content panel.

Again, this can help organise a lot of information in a very small space, and therefore improving readability of our website.

We can have alert popups on a click, and this is a simple message box.

So this will be something that appears not on the website as such, but as a message box within the web browser.

And this may occur when a button is clicked.

This may be to give users quick reminders, warnings or facts.

We also have hover effects, and this is when we may change an element's appearance when the mouse is hovered over it.

So this could be colour, this could be the text getting changed into bold.

And what this does is draws attention to the important content and enhances accessibility for users navigating with a mouse.

And the final one is a simple quiz, and this could be presented as a multiple-choice question that checks the answer instantly through the click of a button or maybe using radio buttons.

We would use this because it engages the users and it may also help enforce key messages.

So what you can do to go and have a look at these common interactive elements is go to the link at the bottom and open it up.

You can run the code and have a test of the different interactive elements that are on that webpage, and it goes through each one.

It will also give you some ideas about what you could add into your website.

So moving on, let's have a look at a question.

Why is it important to add interactivity to a website? Is it A, to make the website load slower so users spend more time waiting; B, to engage users and help them learn key information actively; C, to make the website look busy with animations and effects; D, to replace the need for clear-written content? If you need to pause the video now to read through the question and decide on your answer, do so now.

Okay, what answer did you get? If you got answer B, you would be correct.

It is to engage the user and help them learn key information actively.

So remember, we are adding interactivity to our website to make it more engaging and enhance the user experience.

So if you've got B, well done and let's move on.

The first task in today's lesson is to create some interactivity using JavaScript.

Part one, open up the starter code using the link provided.

In there you'll find a basic website already set up for you.

Part two is to add in the following interactivity: So A, on the homepage, add a show/hide section for quick online safety tips; B, on the social media page, add an accordion menu to reveal advice on safe social media use; and C, for the gaming page, add a quiz to test the user's knowledge.

This could be just one question.

You don't have to add lots of different questions.

It can just be one.

And part three, where appropriate, add a simple hover effect for key information.

So there are quite a few things to do there.

Remember you have got an example that you can go and have a look at to help you out with creating the interactivity.

A couple of tips before we start though.

Remember to use a separate JavaScript file for each webpage you create.

So the index page will have a JavaScript file, the social media page will have a JavaScript file and so on.

We do this because it'll make it easier for you to find any mistakes in your JavaScript.

It will also help when you test the JavaScript to find any errors and potentially debug it.

If you need to pause the video to read back through the task, do so now.

Okay, let's take a look at how we did.

So this is a potential solution that you could have included.

What we've got here is part of the social media webpage and what we've included is the accordion menu.

We have got a button created for the menu and you can see there the button class called "accordionBtn." We have got the data target.

So remember that is the ID of the content we're looking for and it is called "privacyTips." We've then got the button name, which is Privacy Settings.

We have then got the section that is going to contain the content that we are gonna use in our accordion menu.

And we can see it's got the ID called "privacyTips," and then it has got the content underneath it, so it's got the paragraph about.

So let's take a look at the JavaScript solution for this accordion menu.

As you can see, we are working in the social media script JavaScript file.

We have got right at the top for our accordion menu.

We have got a variable called "accordionButtons," and that is so we don't have to keep repeating the line of code, which is about document.

querySelectAll looking for the ID accordionBtn and then adding in the event listener each time.

Within that variable, we have got the ID accordionBtn, which is what we have called the button on the HTML file.

We have added in our event listener, which is a click because we are creating a button.

So we are looking for the click of the button.

And then we have got our target ID.

And again, we are using a variable.

It is looking for the data target.

And if you remember on the HTML code, our data target is called "privacyTips." What it also has is that final line allows that when we click the button again, it will go back to a hidden state so we can hide and unhide parts of our accordion menu.

If we take a look at one full potential solution for our accordion menu, we can see here we are on the social media HTML page.

We have got our section, this is our important safety topics, and we have got three buttons added in as part of our accordion menu.

Each button has got the accordionBtn class name.

Each of them has got a data target and you can say they've got privacySettings, cyberbullyingInfo and fakeProfiles with then information regarding that particular topic.

So if we have a look at the JavaScript, we have got our accordionBtn variable as explained earlier, we have got our event listener, we have got the targetID variable, which is looking for the data-target IDs, and that was things like privacy tips, cyber bullying and so on.

And we can then have a look at how our page will run.

So as you can see, our social media page has loaded up.

We have got our accordion menu underneath this heading Important Safety Topics and we can click each button and get the information and we click it again to close it.

So we know that our accordion menu is working as anticipated.

Let's take a look at the index page where we have got a show/hide button and we have also got a rollover because this is where I've decided to put it.

We have got our show/hide button that's got a list of tips and you see underneath the important safety tips and that has got the ID of safetyTips and it's currently set to hidden.

And then further down the page in a separate section, we have got the division idea of safety facts and it will change colour when we put the mouse over it.

So if we have a quick look at the script, we have got the show/hide safety tip at the top where we have got our toggleTipsbtn variable to hold the document.

getElementById information.

We have then got an if statement that if the button has been clicked, it is going to show the content of the show/hide.

And if it's then clicked again, it is gonna hide it.

The second piece of code on this JavaScript file is the hover effect.

And again, we've got our constant called "safetyFact," which is looking for the element safetyFact.

And if we move the mouse over, it is gonna change the colour of the background to a light blue.

And then when we move the mouse out, it is going to revert back to the original colour.

And if we take a look at the page, we can show our safety tips.

And when we hover over the safety fact, it highlights it in blue.

And when we move back out, it goes back again.

And again, we can close the Show/Hide Tips.

And on our gaming webpage, we have put a little quiz.

This example has included three questions, but remember if you added one question, that was great.

So if we have a quick look at the code here, we have got a section for each of the questions.

We have got a paragraph which gives us the quiz question, and then we have got three buttons.

Each button has an ID where we can see it's data-answer="A," data-answer="B," data-answer="C," and we have got the text within the buttons and we've got that repeated for the three questions.

What you might be able to see is on question two, we have changed around the data answer.

So here the data answer is B, but that's the one that is set first.

And this is because when you'll see in the JavaScript that we have set the answer to always be one particular letter, but so it isn't picked up by the user, we change the data answer position within our HTML.

So if we have a look at the JavaScript, we have got our quiz buttons set up as a constant variable so we don't have to keep repeating the find the element.

For each of the quiz buttons, we are listening for an event.

So again, depending on which answer they click, it's then going to go through and look for the data answer.

If the data answer is equal to A, it will tell us that the answer is correct.

If not, it will tell us the answer is incorrect.

So when we go back to the HTML and we can see that each of the data answers the A position has moved on that second question because the answer to B is false.

If we have a look at the website, we can test our gaming knowledge.

And if we do question one, someone you don't know, don't tell them and block them.

It'll tell us the answer at the bottom.

If we click any of the others, it'll tell us it's incorrect.

If we look at question two, true or false, it's okay to click on links from other players if they seem friendly, that is false.

And again, another player is being mean to you, what should you do? Tell a grownup or report them in game and we can see that we can get the correct answer by clicking on A.

And again, if you click B and C, it states that it is incorrect.

So how did you do? Remember that that is some examples of how to use the code and include it within the website.

Is yours similar, have you been able to include each of those elements? Have you only managed to get one page working? As long as you have got some interactivity within your website and it is working as expected, you've done a really good job because the JavaScript is quite fiddly to get working.

Remember the key points were to make sure you've got a JavaScript file for each of the web pages that you have on your website, okay? And remember, you did have the example from earlier in the lesson that you could use to help you out.

So if you've managed to get it all working, brilliant stuff, let's move on.

Moving on to debugging the code to improve the user experience.

And you may have done debugging before if you've done any form of programming.

So remember, debugging means finding and fixing errors in code that stop it from working correctly.

You can debug when you are developing a website because the errors might be that the webpage does not load correctly, the styling does not display or may not display as you anticipated.

The buttons do nothing.

Or the JavaScript console shows some red error messages.

So to debug a website during development, we need to follow the following steps.

One, we need to find the error.

Two, we can use the web browser developer tools to check the console log.

So this is different to using the code editor.

So if you are looking at your webpage using a web browser, you'll be able to use the developer tools within the web browser to check for any errors.

Three, you need to read the error message.

Four, trace through the code to check for errors.

Five, fix the error and run the code to check that the update works.

So again, when we have put the JavaScript into separate files for each of our web pages, this means it's gonna be much easier to go and test and debug and correct any errors because it's only going to be running one section of our JavaScript.

When debugging, always make sure you save the new file before refreshing the web browser because otherwise it's going to continually run the older version.

Make sure to use clear IDs and class names across the HTML, CSS and JavaScript code.

Do not expect everything to work correctly the first time.

Making mistakes is all part of the process.

Okay, so remember, if something's not working, do go and check the spellings of your IDs and your class names just in case when you've been typing, you've misclicked something.

really easy to do.

So let's take a look at a question.

Which of the following is the best first step when something on your website is not working as expected? A, try deleting the code and starting over; B, ask your friend to fix it; C, use developer tools and check the console; D, change all your colours to see if that helps.

If you need to pause the video to read through the question and decide upon your answer, do so now.

Okay, what do we think the answer is? Which one did you decide on? The answer we were looking for is C.

Use developer tools and check the console.

Developer tools help you find out where the error is and what kind of error it is.

The console often tell you the exact line and file that need to be fixed.

So if you've got C, excellent job, well done.

And let's move on.

Testing is done once the website is complete, you do it to see if there are any problems with the website and to check everything is working as expected.

Testing can be done on functionality, layout and styling, accessibility and user experience.

So the test plan could be quite big if you are going to test all of those sections.

A test plan is a simple table that will help you organise how you'll test your website.

You use your test plan to check that every part of your website works, match your website to the user requirements, record problems and how you can fix them.

So the test plan is not just about making sure everything works correctly, it's also ensuring that the website you have created matches those user requirements that were set up right at the beginning because you could have a great website, but it doesn't match what the user wants and therefore you haven't completed the project brief correctly.

The test plan itself is gonna be created based on the user requirements and details what the testing will involve.

It will have a space where you can record the test results.

So we've got an example of what a test plan could look like here.

We have got the test description, we've got the expected outcome, we've got the result, and we've got if any action needs to be taken.

An example test plan for our Eco-Friendly Choices website.

We have then got our test description, we've got our expected outcome, we've got the results, and we have got the actions taken.

So we've already looked at the top test.

So if we have a look at the third test we have got check the show/hide section for daily tip, click the button and the show/hide daily tip will work.

The result is that it failed.

So when we've clicked the show/hide button, the daily tip hasn't appeared or it hasn't disappeared.

And what we've done there is we've gone to the JavaScript and we have fixed the script.

So it now works.

Okay, so very simple in terms of the description of the test, what we are expecting it to happen, and then if we have to take any action.

So what we've had to go and do.

Let's have a look at another question.

Why is a test plan useful when developing a website? Is it A, it makes the code easier to write; B, it helps track what needs testing and fixing; C, it automatically corrects coding errors; D, it designs the layout of the website.

If you need to pause the video so you can read back through the question and decide on your answer, do so now.

What do we think the answer is? Is it A, B, or C? If you said B, you were correct.

It helps track what needs testing and fixing.

So as it says there, a test plan helps you stay organised, checks all the features and tracks the fixes that you have made.

And this is why we use a test plan as it says there, it helps us structure the checking of our website to ensure that everything is working as we think it should be and that it is also hits all the criteria in our user requirements.

Moving on, let's have a look at a test plan.

So what you're going to do is use the test plan template for the online safety website.

This has been provided in the additional materials for this lesson.

The first part is you need to add two more tests to the test plan based on the user requirements.

Two, test each feature carefully and record the results in the test plan.

Three, use the web browser tools for debugging.

Four, fix any errors in the HTML, CSS, and JavaScript code.

Five, update your test plan when you have fixed an error.

And six, retest until the website meets the user requirements.

So if you need to pause to read back through the task, do so now.

Here's an example of a completed test plan.

Yours is obviously going to be slightly different because it's an awful lot longer and you may have added in some personalised tests.

But if we take a look at what we've got, we've got three tests here on the page.

The first one is to navigate to each page from the homepage.

We expect all three pages to load correctly.

The result was this one was passed and no action was taken.

The second one was click the navigation links on each webpage.

Each link loads the correct page.

This failed and the action taken was that we had to go in and fix one of the hrefs in the HTML.

And then the final one is checking that the colours, the fonts and the layout on each webpage are all the same style.

And this passed, so therefore no action was taken.

As I've said, your test plan is a lot longer because it's going through the whole website to ensure that everything is working correctly.

If you've got through your test plan, you have tested everything, you've taken all of the actions needed to ensure that your website is working as expected.

Excellent job.

So moving on, we are going to be looking at how we compare a website to the user requirements.

After building and testing a website, it's important to evaluate how well it meets the user requirements.

This process ensures that the website does what it's meant to do for the target audience.

So the evaluation may involve the following: Reviewing the user requirement list; checking each feature or design choice against what was planned; noting anything that's missing, maybe not working properly or not matching the brief; and suggesting improvements based upon this review.

To do this, we're going to use a rubric.

This is a guide that has clear criteria to assess a website.

A rubric breaks down the user requirements into clear criteria showing what a successful website will look like.

It will help you judge the completed website effectively, and it will help make it easier to give constructive feedback.

Let's take a look at an example of a rubric for our Eco-Friendly Choices website.

What we've got listed are the user requirements.

We've then got a column to allow us to evaluate whether the user requirement has been met, partially met or not met.

And then we've also got a column where we can specify improvements.

So on the example we've got has working navigation that has been met and therefore no improvements are required.

This next user requirement is gives eco-friendly tips and we're saying that it's been partially met.

And the improvement would be to add more tips as there is only one.

And uses house style.

Again, we've put in partially met.

And what needs to happen is we need to make the text easier to read.

So potentially changing the font.

Let's have a look at a question.

Why is a rubric useful when checking a website? A, it shows only your opinion; B, it gives clear criteria to judge the work; C, it makes user requirements less important.

If you need to pause the video to decide upon your answer, do so now.

So what did we get? If you got the answer B, you were correct.

It gives clear criteria to judge the work.

So moving on.

Task C is looking at comparing your online safety websites to the original user requirements using the rubric template provided in the additional materials for this lesson.

One, use the provided rubric to self-assess your website.

Two, complete the comparison table including whether the user requirements have been met or not.

And three, suggest one or two improvements based upon your self-assessment.

So if you need to pause the video to read back through the task, do so now.

Here we've got an example of a partially completed rubric.

We've got the user requirements, the met, partially met or not met column, and the improvements column.

So when evaluating the website has working navigation, we have met that criteria.

Therefore, there are no improvements to make.

The second one website provides useful online safety advice.

We've put partially met as further details on gaming could be included.

And the third one there, website has at least three pages of content.

We have met this, no improvements are needed.

Obviously what we've got here is an example of how the rubric could be completed.

When you have completed your own for your website, it is gonna be personalised to what you have or haven't included within the website regarding the use of interactivity through JavaScript, how you've implemented any house styles and so on.

But if you've gone through and in the main, your website has met the user requirements, whether fully or partially, and you have been able to make some comments around improvements that could be made, excellent job, you have done really well in terms of going through and testing your website and then also comparing it to the user requirements through the use of a rubric.

So what you should have is a fully working website that has included both house stylings and interactivity through the use of JavaScript that match the project brief regarding online safety with the target audience being students at secondary school.

So to summarise today's lesson, we have looked at debugging, which helps you find and fix areas in HTML, CSS and JavaScript to ensure that your website works correctly.

Testing your website against user requirements, checks that everything functions as planned and meets the project goals.

And using a rubric helps you evaluate your final website, identifying strengths and areas for improvement before submission.

So thank you for joining me in today's lesson where we have finished off our web-based project.

During this project, you have gone through and looked at a project brief, decided upon the user requirements, done the design work, including wire frames and house styles, built the actual website, which included the use of HTML, CSS and JavaScript, tested it, and then gone back and looked at the user requirements to ensure that your website was fulfilling the brief.

If you have managed to come through the whole project and you've got a working website that has been tested and compared back to the user requirements, you have done an exceptional job during this project.

So amazing work.

Really, really well done.

I'm hoping you're able to take away lots of skills from this project and I hope to see you again in another unit of work.