Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

1) The Accordion widget lets the user display the contents of a panel by clickin

ID: 3586599 • Letter: 1

Question

1)

The Accordion widget lets the user display the contents of a panel by clicking on

(1pts)

the panel

a link

a button

the header of the panel

2)

To use a plugin, you must code all but one of the following:

(1pts)

a script element for the plugin

a script element for the jQuery library

a link element for the plugin’s CSS file

a link element for your own CSS file

3)

What type of control is a Datepicker widget associated with?

(1pts)

a check box

a text box

a radio button

a text area

4)

Before you can use most plugins, you must

(1pts)

register with the jQuery website

download them and store them on your web server

make sure they are available on the jQuery website

understand the code and CSS they contain

5)

Which of the following statements would you code to activate a Tabs widget that uses the HTML that follows?
<div id="panels">
    <ul id="tabs">
        <li><a href="#tabs-1">Book description</a></li>
        <li><a href="#tabs-2">About the author</a></li>
        <li><a href="#tabs-3">Who this book is for</a></li>
    </ul>
    <div id="tabs-1"><!-- the content --></div>
    <div id="tabs-2"><!-- the content --></div>
    <div id="tabs-3"><!-- the content --></div>

</div>

(1pts)

$("#panels").tabs();

$("#tabs").tabs();

$("#panels li").tabs();

$("#tabs li").tabs();

6)

To modify the formatting of a carousel that’s created by the bxSlider plugin, you can adjust

(1pts)

the jQuery code for the plugin

the options that you pass to the bxSlider() method

the styles in the CSS file for the plugin

the HTML that you code in your web page

7)

To include jQuery UI in your application, you must first include the core jQuery library. After that, which files and folders do you need to include?

(1pts)

the images folder, the external folder, and the compressed jQuery UI file

the images folder, the external folder, the compressed CSS file, and the compressed jQuery UI file

the compressed CSS file and the compressed jQuery UI file

the images folder, the compressed CSS file, and the compressed jQuery UI file

8)

The slides for a Cycle 2 plugin are typically coded as a series of img or div elements within a/an

(1pts)

section element

div element

ul element

ol element

9)

Code example 11-1
The HTML that is used by a Lightbox plugin
<a href="images/book_01a.jpg" data-lightbox="Murach" data-title="HTML5 and CSS3">
    <img src="images/book_01b.jpg">
</a>
<a href="images/book_02a.jpg" data-lightbox="Murach" data-title="PHP and MySQL">
    <img src="images/book_02b.jpg">
</a>
<a href="images/book_03a.jpg" data-lightbox="Murach" data-title="JavaScript">
    <img src="images/book_03b.jpg">
</a>
<a href="images/book_04a.jpg" data-lightbox="Murach" data-title="SQL Server 2016">
    <img src="images/book_04b.jpg">
</a>

(Refer to code example 11-1) What does “Murach” in the data-lightbox attributes of the <a> elements represent?

(1pts)

the text that will be displayed at the top of the lightbox

the group name for the set of elements

the name that’s used in the JavaScript to refer to the lightbox

the name of the array where the images for the lightbox will be stored

10)

What do the following options do?
    $("#datepicker").datepicker({
        minDate: new Date(),
        maxDate: +45

});

(1pts)

display a bar at the bottom of the widget with the minimum and maximum dates

add controls that let the user select between the minimum and maximum dates

set the maximum number of months that the widget can display

set the minimum and maximum dates that a user can select

Explanation / Answer

1) The Accordion widget lets the user display the contents of a panel by clicking on the header of the panel.

·         Each container has a heading element associated with it that is used to open the container and display the content. When you click on a heading, its content will slide into view with an animation also below it. The currently visible content is hidden, while the new content is shown whenever we click on an accordion heading.

·         The accordion widget is a robust and highly configurable widget that allows you to save space on your web pages, by displaying only a single panel of content at any time.

·         The height of the accordion's container element will be set automatically, so that there is room to show the tallest content panel in addition to the headers. Also, by default, the size of the widget will remain fixed, so that it won't push other elements on the page around it out of the way, when content panels open or close.

Note: Only one content panel can be open at a time when using Accordion Widget.

2) To use a plugin you must code the script element of the jquery library.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):

<head>
<script src="jquery-3.2.1.min.js"></script>
</head>

Script is a flow element that executes a script program specified by the user to process, produce or consume jobs.A script flow element can be a processor, producer or consumer depending on the specifications in the attached script declaration. In addition, the script declaration may inject extra properties into the script element and into its outgoing connections. These extra properties serve as arguments to the script program. A script package is an archive file (with filename extension "sscript") that contains all information about a script. It includes a script declaration, a script program, and possibly an icon to be displayed in the Switch flow designer instead of the standard script element icon. A script package can be exchanged between users as a single entity.

3) Datepicker widget is associated with a text box. A Text box is an editable control suitable for character, numeric, and date/time data details. In other words, the datepicker widget is tied to a standard form input field.

The source for datepicker can be as follows:

a) For Pop-Up datepicker:

<input type="text" data-role="date">

b) For inline datepicker:

<input type="text" data-role="date" data-inline="true">

4) Before you can use most plugins for jquery, you must download them and store them on your web server for further use.

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file. The map file is not required for users to run jQuery, it just improves the developer's debugger experience. Without downloading the jquery library, you can not use them with your code to get the functionality of jquery.

The following steps can be followed

1) Download Jquery from available sources

2) Copy the js file into your root web directory

3) In your index.php or index.html between the head tags include the following code, and then JQuery will be installed: