You’ve just learned about jQuery and about how it can add interactivity to webpages. In the first assignment, you will get to implement several common user interfaces that you can use in your own websites!
The accordian is a user interface that is used on long pages to make sections expandable and collapsible. This helps a user navigate the page by shortening the vertical height, and hiding sections that the user is not interested in. Initially, each section is collapsed and only the section headers are visible. A click on the header causes the section to expand. A second click causes the section to collapse. A good example of the accordian interface is the mobile Wikipedia website.
Requirements
The code files for the accordian are accordian.html, css/accordian.css and js/accordian.js. You will only need to modify js/accordian.js.
You should implement the function createAccordian. createAccordian should take in a single parameter accordianElem, which can be a CSS selector, jQuery element, or DOM element.
accordianElem represents a collection of clickable elements. Each clickable element has an associated text block, which is the HTML element that immediately follows the header. When the function is invoked initially, all the text blocks should be hidden. When a clickable element is clicked on:
After implementing createAccordian, use the function to make each question on the page a clickable element.
Hints
The text blocks can be selected using the tree traversal functions. The sliding animations can be implemented using the sliding effects functions.
The implementation should be relatively short. The reference solution is about 15 lines long.
The image slideshow is a nice way to rotate through multiple images without needing user interaction. Image slideshows have been used on the front pages of many major websites, as it is an easy way to expose the user to an array of content in the website. It has also been used in photography applications such as Flickr and Picasa. A good example of a slideshow can be found on the Stanford front page.
Requirements
The code files for the slideshow are slideshow.html, css/slideshow.css and js/slideshow.js. You will only need to modify js/slideshow.js.
You should implement the function createSlideshow. createSlideshow should take in two parameters, slideshowElem and duration. slideshowElem can be a CSS selector, jQuery element, or DOM element that represents a single slideshow element. duration is a number that specifies the duration in milliseconds between image transitions. duration should be a optional parameter. If omitted, the duration should be set to 5000 by default.
The slideshow element is given by slideshowElem. The slide elements are the <img> elements that are the children of the slideshow element.
When the function is invoked, you should immediately hide all slide elements. You should then fade in the first slide. Every duration seconds, you should transition to the next image. This duration is inclusive of the time required for animation. To transition slides, fade out the current slide. When the current slide is completely faded out, fade in the next slide.
After creating this function, use the function to create a slideshow out of the images on the page.
Hints
The timer can be implemented using setInterval or setTimeout. The slide elements can be selected using the tree traversal functions. The animations can be implemented using the fading effects functions.
For the slideshow to work, the images are stacked over each other using CSS styling. This has been implemented for you in slideshow.css, and you should not need to write any additional CSS.
This part of the assignment should be medium-length. The reference solution is about 35 lines long.
Many web applications involve some kind of forms. Form validation is a way for you to tell the user what kind of input is required in each field, and allows you to notify the user when the input is incorrect. There are many ways to do form validation, but in this class we will write a plugin that displays information / error messages besides the fields. The Microsoft account sign up page is a good example of form validation – it is also a good example of an extremely long and complicated form that would be unfriendly without validation!
Requirements
The code files for form validation are validate.html, css/validate.css and js/validate.js. You will only need to modify js/validate.js.
You should implement the function validateField. validateField should take in three parameters, fieldElem, infoMessage, and validateFn. fieldElem can be a CSS selector, jQuery element, or DOM element that represents a single form text field. infoMessage should be a string that gives a human-readable description of the field’s requirements. validateFn should be a function that validates the field’s value.
When the function is invoked, you should insert a <span> notification element immediately after the form field. The notification element should initially be hidden.
When the field is currently being edited, the notification element’s text should be infoMessage, its class should be “info”, and it should be visible.
When the field is not being edited:
Additionally, use this function to validate the form fields on the web page. You may use any sensible information messages of your choosing. The validations are as follows:
@ character.Hints
You should use the form events functions to detect when a form field gains or loses focus. You should not use mouse and keyboard events such as click or keydown: there are multiple ways to give a form field focus, and it is difficult to detect all of them reliably using mouse and keyboard events.
The information span element can be added using element creation and DOM insertion.
This part of the assignment should be medium-length. The reference solution is about 40 lines long.
To submit, create a compressed .zip archive containing your homework directory. Name the file “cs98si_hw1_username.zip”. Email the archive to maiyifan “at” stanford “dot” edu with the subject line “CS98SI HW1 username”.