MCSD Programming in HTML5 with JavaScript and CSS3 v1.0 (70-480)

Page:    1 / 22   
Total 317 questions

You are developing application web form by using HTML5 and JavaScript.
You need to prevent users from submitting form data more than once.
Which code segment should you use?


  • A. Option A
  • B. Option B
  • C. Option C
  • D. Option D


Answer : A

Explanation:
✑ this, in disable(this), refers to the clicked button.
✑ The disabled attribute is a boolean attribute.
When present, it specifies that the <input> element should be disabled.
A disabled input element is unusable and un-clickable.
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a
JavaScript could remove the disabled value, and make the <input> element usable.
Reference:
https://www.w3schools.com/TAGS/att_input_disabled.asp

You are developing an HTML5 web application for a surveyor company that displays topographic images.
The application must:
✑ Display the topographic images at different zoom levels without loss of detail
✑ Print the topographic images without loss of detail
✑ Work from only one source file for each topographic image
You need to ensure that the topographic images display according to the requirements.
Which HTML5 element should you use?

  • A. SVG
  • B. CANVAS
  • C. SAMP
  • D. AREA


Answer : A

Explanation:
SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web

SVG is a W3C recommendation -
The HTML <svg> element (introduced in HTML5) is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.
Reference:
https://www.w3schools.com/html/html5_svg.asp

HOTSPOT -
An HTML page has a CANVAS element.
You need to draw a red rectangle on the CANVAS element dynamically. The rectangle should resemble the following graphic.


How should you build the code segment? To answer, select the appropriate options in the answer area.
NOTE: Each correct selection is worth one point.
Hot Area:



Answer :

Explanation:
Example:

Drawing with JavaScript -
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Reference:
http://www.w3schools.com/html/html5_canvas.asp

You are modifying a website. The body of the page will be divided into two sections:
✑ A content section will contain blog posts and comments.
✑ An area on the right-hand side will contain advertisements.
The page is defined by the following HTML.


The site must conform to HTML5 standards and must use HTML5 semantic tags.
You need to ensure that the advertisements are on the rightmost section of the page.
Which tag should you use?

  • A. <aside>
  • B. <div>
  • C. <article>
  • D. <footer>


Answer : A

Explanation:
The <aside> tag defines some content aside from the content it is placed in.
The aside content should be related to the surrounding content. aside is now acceptable for secondary content when not nested within an article element.
References:
https://www.w3schools.com/TAGS/tag_aside.asp

You are developing an HTML5 page.
You need to add author and copyright information.
Which tag should you use?

  • A. <aside>
  • B. <header>
  • C. <footer>
  • D. <section>


Answer : C

Explanation:
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Reference: The footer element -
http://dev.w3.org/html5/spec-preview/the-footer-element.html

You are developing an HTML5 web application and are styling text.
You need to use the text-transform CSS property.
Which value is valid for the text-transform property?

  • A. Lowercase
  • B. Blink
  • C. Line-through
  • D. 20px


Answer : A

Explanation:

CSS Syntax -
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
References:
https://www.w3schools.com/cssref/pr_text_text-transform.asp

DRAG DROP -
You are developing a web page for runners who register for a race.
The page includes a slider control that allows users to enter their age.
You have the following requirements:
✑ All runners must enter their age.
✑ Applications must not be accepted from runners less than 18 years of age or greater than 90 years.
✑ The slider control must be set to the average age (37) of all registered runners when the page is first displayed.
You need to ensure that the slider control meets the requirements.
What should you do? (To answer, drag the appropriate word or number to the correct location in the answer area. Each word or number may be used once, more than once, or not at all. You may need to drag the split bar between panes or scroll to view content.)
Select and Place:




Answer :

Explanation:
Box 1-3: The <input type="range"> is used for input fields that should contain a value within a range.

Example -
<input type="range" name="points" min="0" max="10">
Box 4:
The step attribute specifies the legal number intervals for an <input> element.
Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Syntax -
<input step="number">
number
Specifies the legal number intervals for the input field. Default is 1
Box 5: Use the value attribute to set the default value. Here: 37

Box 6: Definition and Usage -
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.

Example -
Username: <input type="text" name="usrname" required>

Reference: HTML Input Types -
http://www.w3schools.com/html/html_form_input_types.asp

You are creating a JavaScript object that represents an employee.
You need to extend the Employee object by adding the GetPayroll() method.
You need to ensure that all future instances of the Employee object implement the GetPayroll() method.
Which code segment should you use?


  • A. Option A
  • B. Option B
  • C. Option C
  • D. Option D


Answer : D

Explanation:

Object.prototype.constructor -
Returns a reference to the Objectfunction that created the instance's prototype. Note that the value of this property is a reference to the function itself, not a string containing the function's name. The value is only read-only for primitive values such as 1, true and "test".
The constructor property is created together with the function as a single property of func.prototype.
References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor

You are developing an HTML5 page that includes several paragraph elements.
You have the following requirements:
✑ Add a drop shadow that is one inch below the text in the paragraph
✑ Set the radius of the drop shadow to five pixels
You need to style the paragraphs to meet the requirements.
Which CSS style should you use?

  • A. Text-shadow: 72pt 0pt 5pt
  • B. Text-shadow: 5px lin 0px;
  • C. Text-shadow: 72pt 0em 5px;
  • D. Text-shadow: 100px 0px 5px;


Answer : B

Explanation:
We set the second argument (vertical) to one inch (1in).

Note -

Syntax -
text-shadow: h-shadow v-shadow blur color;
Note: The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.
* h-shadow
Required. The position of the horizontal shadow. Negative values are allowed
* v-shadow
Required. The position of the vertical shadow. Negative values are allowed
* blur

Optional. The blur distance -
* color
Optional. The color of the shadow.

You are developing an HTML5 web application and are styling text.
You need to use the text-transform CSS property.
Which value is valid for the text-transform property?

  • A. Capitalize
  • B. Red
  • C. 20px
  • D. Italic


Answer : A

Explanation:

CSS Syntax -
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Example -
Transform text in different elements:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
Reference: CSS text-transform Property
http://www.w3schools.com/cssref/pr_text_text-transform.asp

You are modifying a blog site to improve search engine readability.
You need to group relevant page content together to maximize search engine readability.
Which tag should you use?

  • A. <article>
  • B. <table>
  • C. <div>
  • D. <span>


Answer : A

Explanation:
The <article> tag specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:
✑ Forum post
✑ Blog post
✑ News story
✑ Comment

You are developing an HTML5 page that has an element with an ID of picture. The page includes the following HTML.


You need to move the picture element lower on the page by five pixels.
Which two lines of code should you use? Each correct answer presents part of the solution.
NOTE: Each correct selection is worth one point.

  • A. Option A
  • B. Option B
  • C. Option C
  • D. Option D


Answer : AB

Explanation:
We use relative position to move the position 5 pixels lower on page.
Using a negative value would move the picture higher on the page.
Note:
The top property sets or returns the top position of a positioned element.
This property specifies the top position of the element including padding, scrollbar, border and margin.

Syntax -
Set the top property:
Object.style.top="auto|length|%|inherit"
Where:
Length defines the top position in length units. Negative values are allowed

You are modifying a blog site to improve search engine readability.
You need to group relevant page content together to maximize search engine readability.
Which tag should you use?

  • A. <section>
  • B. <tbody>
  • C. <div>
  • D. <table>


Answer : A

Explanation:
The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.

You are developing a customer web form that includes the following HTML.
<input id="txtValue"/>
You need to change the HTML markup so that customers can enter only a valid three-letter country code.
Which HTML should you use?

  • A. <input id="txtValue" type="country"/>
  • B. <input id="txtValue" type="text" required="xxx"/>
  • C. <input id="txtVa!ue" type="text" pattern-" [A-Za-z] {3} "/>
  • D. <input id="txtValuen type="code" pattern"="country"/>


Answer : C

Explanation:
HTML <input> pattern Attribute
The pattern attribute specifies a regular expression that the <input> element's value is checked against.

Example -
An HTML form with an input field that can contain only three letters (no numbers or special characters):
<form action="demo_form.asp">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code"/>
<input type="submit">
</form>
Reference: HTML <input> pattern Attribute
http://www.w3schools.com/tags/att_input_pattern.asp

You are developing an HTML5 web application and are styling text.
You need to use the text-transform CSS property.
Which value is valid for the text-transform property?

  • A. Capitalize
  • B. Hidden
  • C. Italic
  • D. Line-through


Answer : A

Explanation:

CSS Syntax -
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

Example -
Transform text in different elements:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
Reference: CSS text-transform Property
http://www.w3schools.com/cssref/pr_text_text-transform.asp

Page:    1 / 22   
Total 317 questions