IT Specialist HTML5 Application Development Sample Questions:

1. Which markup segment uses the output element to display the combined value of two input elements in HTML5?

A) < form > < input type= " number " name= " a " value= " 50 " / > + < input type= " number " name= " b
" value= " 50 " / > = < output name= " c " for= " a b " > < /output > < /form >
B) < form > < input type= " number " name= " a " value= " 50 " / > + < input type= " number " name= " b
" value= " 50 " / > = < output name= " c " for= " a b " > a+b < /output > < /form >
C) < form oninput= " a.value+b.value " > < input type= " number " name= " a " value= " 50 " / > + < input type= " number " name= " b " value= " 50 " / > < /form >
D) < form oninput= " c.value=a.value+b.value " > < input type= " number " name= " a " value= " 50 " / >
+ < input type= " number " name= " b " value= " 50 " / > = < output name= " c " for= " a b " > < /output
> < /form >

2. You have created custom error messages for a form. When a user attempts to submit the form with invalid data, the data must remain in the form and error messages must be displayed. Which Event property or method should you use?

A) cancelable
B) defaultPrevented
C) preventDefault
D) abort

3. You need to create the layout shown, which defines five content areas:
* Logo and page title
* Menu
* Main content area
* Additional content area
* Copyright and contact information
You define the following classes:

A) .grid-container { display: grid; grid-template-rows: " heading heading heading heading heading heading
" " menu content content content right right " " menu contact contact contact contact contact " ; grid- gap: 10px; background-color: orange; padding: 10px;}
B) .grid-container { display: grid; grid-template-columns: 33% 33% 33%; grid-template-rows: 300px
500px 300px; grid-gap: 10px; background-color: orange; padding: 10px;}
C) .grid-container { display: grid; grid-template-columns: " heading heading heading heading heading heading " " menu content content content right right " " menu contact contact contact contact contact " ; grid-gap: 10px; background-color: orange; padding: 10px;}
D) .grid-container { display: grid; grid-template-areas: " heading heading heading heading heading heading
" " menu content content content right right " " menu contact contact contact contact contact " ; grid- gap: 10px; background-color: orange; padding: 10px;}

4. Match each property to its corresponding value for creating the CSS flexible box layout.
Move each property from the list on the left to the correct value on the right.
Note: You will receive partial credit for each correct match.

5. You are drawing on the canvas defined by the white square.

At which x, y coordinate is the upper-left corner of the filled square?

A) 50,50
B) 50,0
C) 0,0
D) 0,50

Solutions: