Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser.

Size: px

Start display at page:

Download "Controlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser."

Catherine Susanna Payne
6 years ago
Views:

1 Controlled Assessment Task Question 1 - Describe how this HTML code produces the form displayed in the browser. The form s code is displayed in the <body> tags; this creates the object which is the visible part of the web page. It contains the <h1> tag which gives the form its heading. It is set to one the largest font size of the headings. The tag displays the text between the opening and closing tags. Headings are explained here: The form is created through the form tag. The form tag groups the whole form as an object and within it attributes are used to create the action that it will perform. The form tag doesn t create anything visually but it allows for a form to be created. It is given a name so it can be called by the function. The table tag within the form tag creates the visual part of the form. The amount of the page covered horizontally by the table is set with the width attribute which in this form is set to 50% this means that the table will be 50% of the web browser. The border attribute is set to 0 showing no border around the whole table this is usually specified as pixels through using px. The no border just leaves the view of that part of the table blank. The <tr> tag creates an object that contains the table rows which are literally rows in a table. How many columns in this row is specified by the <td> tag. The <td> tag is within the <tr> object because it specifies something within a row. The first <td> tag displays name because this is what is between the two tags. The second <td> tag is the input box from the user and uses the input tag between them to specify what type of data is entered into the box. The type attribute sets what type of input that the programmer wants the user s feedback in. This is set to text which will always create a text field for the user to write in. Tables are explained here: The two buttons named submit and reset are created through the use of another input tag within a <td> tag. The type attribute specifies that it is a submit button which will always create a submit button or if it is set to reset it will always be create a reset button. This alone would just create a button that performs the job of a submit button or reset button but it would not be labelled. For this the form needs the value attribute. The value attribute is used to set the text within the button if this was left blank the button would be the smallest size possible but if there was no value attribute used it would be the default size and value. It is used to create the text of submit and reset in their respective buttons. There is no style attribute used so it will be the default colour, font size and font. HTML elements are described here:

Attributes are described here: http://www.w3schools.com/html/html_attributes.asp.

Question Two - Describe how the java script function performs the validation check The java if the value of subject is nothing and performs the same job but to the subject object.

2 Attributes are described here: The head and title tags are described here: Question Two - Describe how the java script function performs the validation check The java if the value of subject is nothing and performs the same job but to the subject object. It changes script function validateform() first creates the variable result which it sets to the Boolean value of true. It then creates a variable called msg which it sets to a string value of nothing. To validate the information is has to perform an if statement which uses the value of name in ExamEntry. It checks if the statement within the brackets is true. It states that if the value of name in exam entry is nothing then the if statement is true. This means that it will perform what is within the curly braces. The curly braces contain a command to add You must enter your name \n to msg. Msg is currently nothing so the addition would be the entire message. It then tells the computer to focus which brings the box to the front and puts the cursor in the box. It then retrieves the name element by its id which is set in the html as name. It sets the colour of the text to red by using document.getelementbyid( name ).style.color= red. It then changes the variable result s value to

$It checks subject to red and result to false the same way as the previous if statement but it adds a different message to msg. It adds You must enter the subject \n to msg.$

3 false. The code then has another if statement which does the same job as the first if statement but for the subject box. It checks subject to red and result to false the same way as the previous if statement but it adds a different message to msg. It adds You must enter the subject \n to msg. If both statements are triggered then both messages will be added one after the other. They are separated by the new line \n. The java script then uses another if statement to check if the variable msg is still nothing. This is basically checking if any of the previous if statements were true because if they were msg would no longer be nothing. If it is nothing and none of the previous if statements were true then it returns result. The return stops the code running and result would still equal true because none of the validation checks had found anything wrong. Because result would equal true it would run the action in the form when the user hit the submit button and they would go to success.html. However if one of the first two if statements had been true then msg would no longer equal nothing and so if (msg== ) { Return result; } would be false and the function would not return result there but it would continue to run because it wouldn t execute return. It would continue to the final part of the code and give a prompt to the user alerting them using alert. The alert would contain msg which would depend on which if statements had been true. It would then return result. Because at least one of the first if statements had been true this means that result would have been changed to false because both if statements do this. Additionally the code would have stopped before the alert if neither had been true. Result being false would prevent the form from performing the action and the user would not go to success.html. Instead, due to focus(), the exam entry page would be brought to the front. Javascript statements are explained: Question 3 Describe how the HTML calls the function The html calls the function valdidateform() by using the submit button. It uses an attribute within the input tag of the submit button. Onclick is used to call validatefrom() it returns validateform() through onclick= return vaidateform(). This calls the function when the input tag of submit is clicked. It then runs the java script. When the submit button is clicked it returns validateform().

Question 4 (i) Add another text field to the form to take the user s examination number I added another text field by adding an extra row to the table in the form with the <tr> tag.

4 Question 4 (i) Add another text field to the form to take the user s examination number I added another text field by adding an extra row to the table in the form with the <tr> tag. Then used two <td> tags within this tag to create two columns one for the text field and one for the name next to it. The code is shown in the above image left. The image above right is before the extra text field had been added. The above image shows the extra text field with its name working in the form. It doesn t have any validation checks yet though. The text fields are filled with example inputs so make them easier to see in the image.

(ii) Extend the java script code to validate this field to make sure it is not left blank The image above shows the validation check working when the Examination number text field is left blank.

The image above left shows the java script code that performs the validation check to see if the text field is empty.

5 (ii) Extend the java script code to validate this field to make sure it is not left blank The image above shows the validation check working when the Examination number text field is left blank. It also shows the alert message You must enter your exam number which alerts the user to the fact they have not entered the correct information. The image above left shows the java script code that performs the validation check to see if the text field is empty. Beforehand when submit was clicked and the examination text field was left blank the code would still go to success.html because there was no validation check. The image above right shows the code before I added the validation check. (iii) Extend the java script code to make sure that the user s examination number is exactly 4 digits. The code below shows the if statement to check if the length of the string entered doesn t equal 4. If it doesn t then it shows the alert message and changes the result to false. if (document.examentry.examnumber.value.length!= 4){ msg+="your examination number must be exactly 4 digits \n"; document.examentry.examnumber.focus(); document.getelementbyid('examnumber').style.color="red"; result = false;

} I read how to find the length of the string at http://www.tizag.com/javascriptt/javascriptform.php. This gave me the.

This code makes sure that anything under 4 characters is not entered because if the length doesn t equal 4 then it will trigger the

I got the logical operator of does not equal from here. http://www.w3schools.com/js/js_comparisons.asp.

The image above right shows the code working when the input is more than 4 characters.

6 } I read how to find the length of the string at This gave me the.length part of the code. This code makes sure that anything under 4 characters is not entered because if the length doesn t equal 4 then it will trigger the if statement and change the result to false therefore not entering the input from the user. I got the logical operator of does not equal from here. The image above left shows the code working when the exam number is less than 4 characters. The image above right shows the code working when the input is more than 4 characters. Question 5 Add a set of radio buttons to the form to accept a level of exam entry such as GCSE, AS or A2. Write a function that displays the level of entry to the user in an alert box so that the level can be confirmed or rejected. I had to first check how to code in radio buttons in html. I visited and looked at the radio buttons part of the webpage.

code producing the entry level part of the form.

7 <tr> <td id="entrylevel">entry level</td> <td>gcse<input type="radio" name="entrylevel"><br /> AS<input type="radio" name="entrylevel" ><br /> A2<input type="radio" name="entrylevel" ></td> </tr> <tr> Above is the code producing the entry level part of the form. The inputs had to all be nested within a single pair of <td> tags (opening and closing). The <br /> tag makes sure they are all on the same line. The <br /> makes a break in the line.

The image above shows the working web page with the radio buttons.

The above code shows the function not working due to the variable name of confirm already being taken by javascript. To solve this the name had to be changed to OkClicked.

box with the message of You have chosen + value + is this correct? if the clicked radio button was GCSE then the message would be You have chosen GCSE is this correct?

8 The image above shows the working web page with the radio buttons. The radio buttons are all in a series so that when one is checked and then another is checked instead only one remains checked. This is because they all have the same name. The above code shows the function not working due to the variable name of confirm already being taken by javascript. To solve this the name had to be changed to OkClicked. The variable valueofentrylevel is set to nothing and then the function is defined with the confirm box using var Okclicked = confirm( Message ) This displays the confirm box with the message of You have chosen + value + is this correct? if the clicked radio button was GCSE then the message would be You have chosen GCSE is this correct?. The user would then be presented with the option to confirm using ok or cancel using cancel. The confirm box looks like this: The above images show the code working for all three radio buttons and presenting a different message each time which shows that the function is working.

The way to get the value of the radio button was to set a value to the radio buttons in the html using the value attribute and setting it to the string value of the entry level say GCSE.

The onclick event calls the function of confirmbox() and when the radio button is clicked it brings up the confirm box. The parameter of the function is value.

9 The way to get the value of the radio button was to set a value to the radio buttons in the html using the value attribute and setting it to the string value of the entry level say GCSE. Then I had to use the onclick event which was described here The onclick event calls the function of confirmbox() and when the radio button is clicked it brings up the confirm box. The parameter of the function is value. When the function is called value is set to (this.value) which sets the parameter to the value of the html element that the function is called in. this is used in the examples within This is shown in the below code. I also added an if statement validation check which is shown above and works in the same way as the other if statement validation checks but it checks if the valueofentrylevel is nothing rather than if msg is nothing. Question 6 Produce an evaluation of my solutions <tr> </tr> <td id="examnumber">examination number</td> <td><input type="text" name="examnumber" /></td> My solution to task 4 i) was efficient because I used the same html code as the other text fields. I had to change the individual id of the first <td> element. This is so it can be used by the javascript individually. My solution to 4 ii) is: if (document.examentry.examnumber.value=="") { msg+="you must enter your exam number \n"; document.examentry.examnumber.focus(); document.getelementbyid('examnumber').style.color="red";

10 result = false; } I just used a simple if statement which is the best way I can think of doing it. It uses the same code as the other if statements. I re-named the id to examnumber to make it unique so that it would get the correct element and only that element. I read about identifiers and classes here I used an identifier because this needed to be a unique and classes are used for many different elements. My solution to 4 iii) is: if (document.examentry.examnumber.value.length!= 4){ msg+="your examination number must be exactly 4 digits \n"; document.examentry.examnumber.focus(); document.getelementbyid('examnumber').style.color="red"; result = false; ) } This solution is very efficient because it uses the does not equal sign to make it exactly four digits. This is more efficient than another way because it only uses one conditional and not two. The other way I can think of uses two conditional statements linked together. They would be < 4 and > 4 this has a lot of unneeded code so is less efficient. My solution to the question 5 ) for the radio buttons was: <tr> <td id="entrylevel">entry level</td> <td>gcse<input type="radio" name="entrylevel" value="gcse" onclick="confirmbox(this.value)"><br /> AS<input type="radio" name="entrylevel" value="as" onclick="confirmbox(this.value)"><br /> A2<input type="radio" name="entrylevel" value="a2" onclick="confirmbox(this.value)"></td> </tr> My solution to the javascript confirm box was: var valueofentrylevel = "";

11 function confirmbox(value){ } var OkClicked = confirm("you have chosen " + value +" is this correct?"); if (OkClicked == true){ } valueofentrylevel = value; This is not the most efficient method for producing the confirm box because it produces it before the submit button is pressed. As soon as the radio button is clicked it is produced and is not after the submit button is clicked. This is not very efficient because you have to add a validation if statement as an addition and not part of it. if (valueofentrylevel==""){ } msg+="you need to click your entry level \n"; document.getelementbyid('entrylevel').style.color="red"; result = false; This had to be added afterwards. Another way to do it would be to use an if statement to check if the result from the confirm box is true. It uses an else statement to perform this as the other action of an if statement that checks if the statement is left blank. There is more code in this method but it is a better way of doing it. Question 7 Write a conclusion about the effectiveness of javascript validation routines to reduce the number of errors that are made data input. In my opinion Javascript validation routines are very effective. Javascript is used for billions web pages. One reason is that it is very easy to code. It is easier to learn than other languages like php and can be incorporated directly into HTML because it was designed to do so. The code is a lot easier to write because the syntax is reasonably simple compared to languages like php. This means that it is easier to validate web forms. An example is when you compare if statements javascript is closer to English.

The javascript is on the right and so is more effective at web validations to web validations.

$Here is the if statement: if (document.examentry.examnumber.value.length!= 4){ } msg+="your examination number must be exactly 4 digits \n"; document.examentry.examnumber.focus(); document.$ getelementbyid('examnumber').style.color="red"; result = false; As you can see the code is quite concise and it is very efficient in the job that it does.

getelementbyid('examnumber').style.color="red"; result = false; As you can see the code is quite concise and it is very efficient in the job that it does.

12 The javascript is on the right and so is more effective at web validations to web validations. They are also effective because they successfully reduced the amount of errors that can be entered into the exam form. For example, you can no longer enter an exam number lower or higher than 4 digits. This is very successful and easy to do with a simple operator:!=. Here is the if statement: if (document.examentry.examnumber.value.length!= 4){ } msg+="your examination number must be exactly 4 digits \n"; document.examentry.examnumber.focus(); document.getelementbyid('examnumber').style.color="red"; result = false; As you can see the code is quite concise and it is very efficient in the job that it does. However, there was a lot of code needed to be typed in order for only one thing to be validated. There needs to be code for each if statement that does the same job which is focusing on the element and making the title name for it red. This code is repeated for every single if statement. This means that it is not entirely efficient.

13 As you can see the code is used over and over for each different if statement which is inefficient. However overall, I think that javascript is very effective at reducing errors in web validation even though there is much repetition. This is because it successfully reduced the errors within the exam entry and is easy to learn and code because of its simple syntax.

Exercise 1 Using Boolean variables, incorporating JavaScript code into your HTML webpage and using the document object

Exercise 1 Using Boolean variables, incorporating JavaScript code into your HTML webpage and using the document object CS1046 Lab 5 Timing: This lab should take you approximately 2 hours. Objectives: By the end of this lab you should be able to: Recognize a Boolean variable and identify the two values it can take Calculate