MCSD MCSD Programming in HTML5 2 — Questions and Answers
Question 1: Which HTML5 API allows you to draw 2D graphics programmatically using JavaScript?
- SVG API
- Canvas API (Correct answer)
- WebGL API
- Graphics API
Correct answer: Canvas API
The HTML5 Canvas API provides a 2D drawing surface via the <canvas> element and its getContext('2d') method.
Question 2: Which CSS3 property is used to apply a smooth transition between two states of an element?
- animation
- transform
- transition (Correct answer)
- keyframe
Correct answer: transition
The CSS3 `transition` property specifies the duration and timing of property changes between states.
Question 3: In HTML5, which input type would you use to allow the user to pick a color?
- type='palette'
- type='color' (Correct answer)
- type='rgb'
- type='picker'
Correct answer: type='color'
The `<input type='color'>` element provides a color picker control in supporting browsers.
Question 4: What does the HTML5 `placeholder` attribute do?
- Sets the default value submitted with the form
- Displays hint text inside an input field when empty (Correct answer)
- Locks the field from user input
- Validates the input against a pattern
Correct answer: Displays hint text inside an input field when empty
The `placeholder` attribute shows ghost text inside a form field that disappears once the user starts typing.
Question 5: Which method is used to parse a JSON string into a JavaScript object?
- JSON.stringify()
- JSON.parse() (Correct answer)
- JSON.decode()
- JSON.convert()
Correct answer: JSON.parse()
`JSON.parse()` converts a valid JSON string into a corresponding JavaScript object or value.
Question 6: Which HTML5 element is best suited for representing a self-contained piece of content like a blog post?
- <section>
- <div>
- <article> (Correct answer)
- <aside>
Correct answer: <article>
The `<article>` element is intended for self-contained content that could be distributed independently, such as a blog post or news story.
Question 7: In CSS3, what does the `box-sizing: border-box` declaration affect?
- It adds a visible border around an element
- It makes padding and border included in the element's total width and height (Correct answer)
- It removes the default margin of an element
- It forces the element to display as a block
Correct answer: It makes padding and border included in the element's total width and height
With `border-box`, padding and border are included in the specified width and height, making layout calculations more predictable.
MCSD MCSD Programming in HTML5 2
Which HTML5 API allows you to draw 2D graphics programmatically using JavaScript?