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: http://www.w3schools.com/html/html_headings.asp.
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: http://www.w3schools.com/html/html_tables.asp.
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: http://www.w3schools.com/html/html_elements.asp .
Attributes are described here: http://www.w3schools.com/html/html_attributes.asp .
The head and title tags are described here: http://www.w3schools.com/html/html_head.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. 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
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: http://www.w3schools.com/js/js_if_else.asp.
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. 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. 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 .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. http://www.w3schools.com/js/js_comparisons.asp.
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
http://www.w3schools.com/html/html_forms.asp and looked at the radio buttons part of the
webpage.
<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 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”. Then I had to use
the onclick event which was described here http://www.w3schools.com/js/js_htmldom_events.asp .
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 http://www.w3schools.com/js/js_htmldom_events.asp. 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>
<td id="examNumber">Examination number</td>
<td><input type="text" name="examNumber" /></td>
</tr>
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";
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
http://www.w3schools.com/css/css_id_class.asp . 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 = "";
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. http://html.net/tutorials/php/lesson6.php. http://html.net/tutorials/javascript/lesson6.php.
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.
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.
© Copyright 2026 Paperzz