IntroductionWelcome| 00:04 |
(MUSIC).
Hello, Joe Lowery with you to welcome you
| | 00:06 |
to HTML5 Projects, Creating Surveys.
Surveys are great for getting the lay of
| | 00:11 |
the land on any given subject.
The trick is to get your survey targets
| | 00:15 |
to fill out the darn thing.
In this course, I'll show you how to use
| | 00:19 |
HTML5 and related technologies to create
a survey that's engaging, fun to fill
| | 00:24 |
out, and stores all the users answers
effortlessly.
| | 00:28 |
We'll use CSS3 transitions and transforms
to create a survey cube that respondees
| | 00:34 |
will love, and answer your questions just
to see what happens next.
| | 00:38 |
Thanks to the cool tech of local storage,
all answers will be automatically stored,
| | 00:43 |
and will pull out the answers to display
to the user to give him or her a chance
| | 00:47 |
to change the answers before submitting
them.
| | 00:50 |
Sound cool?
It is.
| | 00:52 |
So let's get going with HTML5 Projects,
Creating Surveys.
| | 00:57 |
| | Collapse this transcript |
| About the exercise files| 00:00 |
I'm very happy to announce that any
member of Lynda.com now has access to the
| | 00:05 |
exercise files used throughout this
title.
| | 00:07 |
Naturally the information in this course
is ultimately intended to be applied to
| | 00:12 |
your own web pages.
However, you may find it helpful to work
| | 00:15 |
with the supplied exercise files.
To practice these steps safely, and
| | 00:19 |
without creating your own examples.
To begin using the file from this site,
| | 00:23 |
you download them, extract them, and then
store those files in a convenient
| | 00:27 |
location, such as your desktop.
The exercise file folder is organized by
| | 00:31 |
chapter, and the chapters are broken down
into various lessons.
| | 00:39 |
Within the lesson chapters there are a
serries of items, typically HMTL, CSS,
| | 00:43 |
images and so forth all the go to make up
the practice files.
| | 00:49 |
For most lessons you'll also find a
folder named final which contains the
| | 00:53 |
completed lesson file which you can
explore at your liesure.
| | 00:57 |
You can either follow the whole course,
chapter by chapter, or jump in at any point.
| | 01:02 |
If you'd rather not use the exercise
files, you can definitely follow along
| | 01:06 |
with your own assets.
| | 01:07 |
| | Collapse this transcript |
| Course and browser requirements| 00:00 |
To follow along with this course, the
requirements are pretty straightforward.
| | 00:04 |
From a tools perspective, you'll just
need a code editor and a number of
| | 00:07 |
browsers for testing.
You can use whichever code editor you prefer.
| | 00:11 |
I'm going to be working with Aptana on
the Mac.
| | 00:14 |
That's a free editor for both Mac and
Windows.
| | 00:16 |
Most of our browser demonstrations will
be done using pretty current versions of
| | 00:21 |
standard base browsers like Firefox.
As a focus in this course is on some of
| | 00:26 |
the more recently released technologies,
you probably shouldn't depend on the
| | 00:30 |
techniques demonstrated if your client
needs to support legacy browsers like
| | 00:34 |
Internet Explorer 6.
Well, that's it for tools.
| | 00:37 |
From a knowledge perspective, you should
be pretty familiar with both HTML and
| | 00:41 |
CSS, with a general understanding of
JavaScript.
| | 00:44 |
I'll walk through any advanced JavaScript
we use block by block.
| | 00:47 |
So you can understand what's going on
under the hood.
| | 00:50 |
Oh, and one last item.
The absolute best thing you can bring to
| | 00:53 |
this course, is your imagination.
Although I'm going to be going through
| | 00:57 |
all the details of applying HTML5
technologies through a specific project,
| | 01:02 |
you'll get the most benefit if you keep
your mind open for other ways.
| | 01:05 |
You can apply the same lessons to your
own work.
| | 01:08 |
| | Collapse this transcript |
|
|
1. Understanding the ProjectWhat we're going to build| 00:00 |
In this lesson, I'm going to run through
the completed creating survey project.
| | 00:04 |
So you can see what we'll be building.
If you're the type who likes to dive
| | 00:08 |
right into the code, and you've already
downloaded the exercise files, you'll
| | 00:11 |
find the completed project in the Chapter
1, 01_01 folder.
| | 00:17 |
So here we are on the fictional Roux
Academy site.
| | 00:21 |
As the page heading says, we have a
student survey cube.
| | 00:25 |
So let me scroll down just a bit so you
can see that better.
| | 00:28 |
And lets run through our survey.
Our first question allows you to choose
| | 00:34 |
as many options as you'd like.
Let's say I'm interested in oh,
| | 00:38 |
photography, glass, and sculpture.
Okay.
| | 00:42 |
What's next?
So I'll click Next.
| | 00:45 |
and the cube moves.
So now, the second question is just a
| | 00:50 |
short answer.
What area of study didn't you see that
| | 00:53 |
you wish you did?
I'm kind of into calligraphy.
| | 00:58 |
Now I can go back to my previous one if I
want, or lets just go on.
| | 01:01 |
Next, how long have you thought of
yourself as an artist?
| | 01:07 |
Well, you know, honestly pretty much
since I was a kid.
| | 01:10 |
Okay, next.
How many hours a day do you practice your art?
| | 01:15 |
None or let's see what the slider goes up
to.
| | 01:22 |
Four, five, six, seven, twelve.
Oh, I can put in all the way up to twenty
| | 01:25 |
four, that's a dedicated artist.
I'm not in that league, I'm going to go
| | 01:28 |
down to 3.
Next 5 of 5, who have you shared your
| | 01:35 |
work with?
Just family, friends?
| | 01:37 |
Well, I have shown it to some friends,
and well, of course, teachers.
| | 01:43 |
So yeah, those two what's next?
well there are my results.
| | 01:50 |
Now if there's something that I'm
thinking about, I see my results here and
| | 01:54 |
I want to change something, like, lets
say, how long have I been an artist.
| | 01:57 |
Since I was a kid.
I'll click modify.
| | 02:01 |
And, let's say, you know, honestly all my
life.
| | 02:05 |
So then I'll page through, the other
answers.
| | 02:07 |
And I can change any of them.
Now once I've verified everything, I'll
| | 02:13 |
click Submit, and I see that our survey
has been accepted.
| | 02:16 |
Alright.
Pretty nifty, right?
| | 02:18 |
At the project's end, you can store the
information in a database using PHP if
| | 02:22 |
you like, or email the results for
processing.
| | 02:25 |
It's totally up to your implementation.
In the next lesson, we'll explore the
| | 02:29 |
technologies that lie under the hood, so
you can get a better sense of how
| | 02:34 |
everything works.
| | 02:35 |
| | Collapse this transcript |
| Highlighted HTML5, CSS3, and JavaScript technologies| 00:00 |
Before we start the actual creation of
the project, let's talk about each of the
| | 00:04 |
key technologies being used.
There are three main technologies brought
| | 00:08 |
into play in this project.
CSS3 Transitions and Transforms, Local
| | 00:13 |
Storage, and Advanced JavaScript.
Lets tackle CSS3 Transitions and
| | 00:18 |
Transforms first.
I absolutely love this definition of 3D
| | 00:22 |
Transforms from the W3C.
How to use a fair number of words and not
| | 00:27 |
say anything.
(INAUDIBLE) Basically, 3D transforms,
| | 00:32 |
allow two dimensional elements to appear
to be three-dimensional.
| | 00:37 |
Simple eh.
To represent 3D in a 2D medium, like a
| | 00:41 |
computer screen, you have to first
establish a perspective.
| | 00:45 |
Typically, in a 3D Transform, a CSS rule
for a containing element like a div is
| | 00:50 |
created that defines both the perspective
and perspective origin.
| | 00:54 |
Perspective is essentially the distance
from the viewer to the object.
| | 00:58 |
Lower numbers bring you closer to the
object and distort it more.
| | 01:01 |
If you're a photographer, you can think
of it as changing the focal length.
| | 01:06 |
A key transform property is translate,
which allows you to move an object along
| | 01:10 |
an x, y, and z axis or all three.
Another important transform is rotate.
| | 01:17 |
As you might suspect, this makes it
possible to spin an object along any or
| | 01:22 |
all axes.
Positive degrees, or radians, move the
| | 01:25 |
object clockwise, and negative,
counter-clockwise.
| | 01:28 |
There's another 3D related property you
should be familiar with, transform-style.
| | 01:33 |
This property determines how the child
elements in a prospective space are rendered.
| | 01:38 |
If transform style is set to preserve 3D,
all children apply their transform.
| | 01:44 |
But if transform style is flat, the
elements appear to be in the 2D plain of
| | 01:49 |
the parent element.
We'll also bring backspace visibility
| | 01:53 |
into play.
To hide the other so-called sides of our
| | 01:57 |
survey cube.
Browser support for Transitions and
| | 02:00 |
Transforms has really improved over the
years.
| | 02:03 |
And now most modern browsers support it
natively.
| | 02:06 |
However, to extend compatibility as far
as you can, it's best to still include
| | 02:10 |
the browser specific properties.
Next let's take a look at Local Storage.
| | 02:15 |
You'll find local storage very easy to
use.
| | 02:18 |
One of the primary benefits of local
storage is that it brings the much needed
| | 02:22 |
functionality of state to websites, so
that you can carry variables from one
| | 02:26 |
webpage to the next without server-side
coding.
| | 02:29 |
Local Storage is browser specific and
provides a much larger storage space than
| | 02:34 |
cookies, 5 megabytes versus 40 kilobytes
for cookies.
| | 02:38 |
Local Storage is set up as a name value
pair structure.
| | 02:41 |
So you will need to convert any
non-string formats that you use in your code.
| | 02:47 |
The two most common commands are setItem
and getItem.
| | 02:50 |
SetItem takes two arguments, the item
name and its value.
| | 02:54 |
While getItem only needs the name of the
item to retrieve it.
| | 02:58 |
Browser support for local storage is
really solid.
| | 03:02 |
Finally there's advanced JavaScript.
We'll actually be using a good bit of
| | 03:06 |
advanced code but the one function that I
want to single out is AddEventListener.
| | 03:10 |
As you might suspect from the name, it
makes it possible to trigger a function
| | 03:15 |
when a particular event occurs.
It was introduced prior to HTML5 and
| | 03:19 |
enjoys widespread browser compatibility
with many different events supported,
| | 03:24 |
everything from mouse clicks and
double-clicks, mouse over, mouse out, key
| | 03:28 |
up, key down, formElement change, form
submit, and more.
| | 03:32 |
addEventListener takes three arguments.
The name of the event entered as a string
| | 03:37 |
in quotes, the function to be called, and
a Boolean, that's true or false of
| | 03:42 |
course, to set the use capture
functionality.
| | 03:45 |
If you're working with multiple functions
for the same event, you can determine
| | 03:49 |
their firing order via useCapture.
The default and the setting we'll be
| | 03:54 |
using is false.
Here's some sample code for addEventListener.
| | 03:58 |
Here, the formElement is a text field.
The event is change.
| | 04:02 |
And the function textBoxChanged.
Here the formElement is a text field.
| | 04:07 |
The event is change.
The function, textBoxChanged and
| | 04:12 |
useCapture is set to false.
Well, that's enough under the hood exploration.
| | 04:17 |
Let's start building.
| | 04:18 |
| | Collapse this transcript |
|
|
2. Setting Up the SurveyUnderstanding the HTML layout| 00:00 |
The layout for this project is a little
involved, so before we start coding, I
| | 00:04 |
wanted to familiarize you with the HTML.
I have open survey.htm from the chapter 2
| | 00:11 |
02.01 folder.
The main content that we're going to be
| | 00:15 |
concerned with starts down around line
33, so lemme scroll down a tad.
| | 00:20 |
You want to look at this section right
after the intro text where the wrapper
| | 00:27 |
div the art is placed.
Now within that is another encompassing
| | 00:32 |
div cubed.
You may recall that I said we need two
| | 00:35 |
containers to handle the preserve 3D
property correctly, and that's what these
| | 00:41 |
two are for.
Then there's a comment indicating where
| | 00:43 |
the form will go.
We'll bring that code in during the next lesson.
| | 00:47 |
Following the form comment, are a series
of six divs.
| | 00:51 |
Each with a class name corresponding to a
cube position.
| | 00:55 |
Front, back, right, left, top, and
bottom.
| | 01:00 |
These are the faces, if you will, of the
cube.
| | 01:03 |
And each of the first five will contain a
question.
| | 01:06 |
The last face will display the review and
submit page.
| | 01:10 |
Within each cube face, there's an inner
container, like the one that starts on
| | 01:14 |
line 37.
That holds the actual content.
| | 01:18 |
The inter container is needed because
we'll be using absolute positioning to
| | 01:22 |
move the cube into place each time it
spins.
| | 01:25 |
And there is some content, the navigation
buttons down at the bottom, that we'll
| | 01:30 |
add later.
Those are absolutely positioned within
| | 01:33 |
each face.
CSS won't allow you to have one
| | 01:36 |
absolutely positioned object nested
within another absolutely object.
| | 01:41 |
So the inner container div acts as a
buffer and is relatively positioned.
| | 01:46 |
I've taken the liberty of including the
basic text for each question.
| | 01:50 |
We'll add the form elements as we go
along.
| | 01:52 |
Now I'm going to scroll down to the last
phase, which is found starting on line
| | 02:00 |
68, and here you'll see that I've already
coded the core table for the survey review.
| | 02:06 |
We'll be adding navigational elements the
modify buttons to the TD cells a little
| | 02:11 |
bit later in the course.
So, that's the lay of the land, and what
| | 02:15 |
we have to work with.
We'll start by bringing in the form in
| | 02:18 |
the next lesson.
| | 02:19 |
| | Collapse this transcript |
| Creating the form| 00:00 |
This is going to be a simple but
important lesson.
| | 00:03 |
It's simple because we're really just
adding one line of code.
| | 00:08 |
It's important because that line of code
controls everything that happens with
| | 00:12 |
your survey.
I have opened survey.htm from the Chapter
| | 00:16 |
2/02_02 folder.
Now let's scroll down to line 35.
| | 00:22 |
Where I have a placeholder for the form
tag.
| | 00:28 |
So I'm going to remove that comment and
add my form code.
| | 00:32 |
I'm going to give this form the ID of
theForm.
| | 00:40 |
Set the method to post, so that the
variables are transferred invisibly.
| | 00:51 |
And set the action to thanks.htm.
Now Aptana automatically gives me a
| | 01:00 |
closing tag here.
I'm going to delete that because I've got
| | 01:04 |
all this code that I want to wrap my form
around.
| | 01:07 |
But, before I do that, I do want to talk
about the action action in for a moment.
| | 01:12 |
The action value determines how the form
is eventually processed when it's submitted.
| | 01:17 |
Right now, we just have it going to a
thank you page.
| | 01:20 |
However, depending on how you want to
process the form, you could substitute a
| | 01:24 |
page that executed server side code like
php or maybe perl.
| | 01:30 |
As I mentioned earlier, setting up this
server side processing is beyond the
| | 01:33 |
scope of this short project course.
But it's important that you understand
| | 01:37 |
how the operation integrates into our
code.
| | 01:40 |
Okay, so let's take care of that other
chore, and I'll scroll down to close off
| | 01:45 |
the form tag.
That can be found on line 102, so I'll
| | 01:50 |
erase the comment and paste in my copied
closing form tag.
| | 01:54 |
By placing the closing tag here, we're
encompassing all 6 divs that form the
| | 02:00 |
sides of our cube.
This makes the processing much easier
| | 02:04 |
while giving the impression of a multi
page form.
| | 02:06 |
Okay.
That's the light and easy on ramp into
| | 02:10 |
our project.
In the next lesson, we'll start bringing
| | 02:13 |
in the questions.
| | 02:13 |
| | Collapse this transcript |
| Crafting the initial questions| 00:00 |
There are all types of survey questions,
multiple choice, short answer, multiple
| | 00:05 |
selection, among others.
In this lesson we're going to do one of
| | 00:09 |
each of the above and then set them up
for JavaScript manipulation along the way.
| | 00:15 |
The first questions asks, what areas the
potential student is interested in?
| | 00:19 |
There are 12 options to choose from and
we want to allow the user to select as
| | 00:24 |
many as they want.
That means either a multi-select list
| | 00:28 |
which to my mind is really not very user
friendly.
| | 00:31 |
Or a series of check boxes we're going to
go with the check boxes.
| | 00:36 |
Check boxes present a particular
challenge when you try to retrieve what
| | 00:40 |
was actually checked.
So we'll include some necessary
| | 00:43 |
attributes to make that possible.
In the survey.php file front eh chapter
| | 00:49 |
two 02 03 folder I'm going to scroll down
to the first face of the cube, front.
| | 00:53 |
That starts on line 36.
Now twelve different check box items is a
| | 01:06 |
significant amount of code, although, not
particularly, complex.
| | 01:10 |
So I've taken the liberty of including
the code in a snip it file.
| | 01:14 |
Called code.htm, which is found in the
Assets folder of this lesson.
| | 01:19 |
Before we copy and paste it into place
let me just go over it a little bit.
| | 01:25 |
So I want to display the check boxes in
two columns.
| | 01:29 |
We're going to be using a Jquery helper
file called columnizer to achieve that effect.
| | 01:35 |
In order for that to happen I've wrapped
the whole thing in a div with a class of column.
| | 01:41 |
Each check box entry is in it's own
paragraph tag.
| | 01:47 |
And each has a label for accessibility
purposes.
| | 01:51 |
The input type check box tag includes a
number of attributes.
| | 01:58 |
The value is, of course, what's read when
the form is processed.
| | 02:02 |
We'll use it to generate part of the
review table at the end.
| | 02:06 |
Now I've included a number of fallback
mechanisms to help whatever processing
| | 02:11 |
you decide to use like the name and ID
attributes.
| | 02:15 |
We'll actually be using the class
attribute which as you can see is called
| | 02:19 |
interests in all items.
Okay so, that's enough of the tour.
| | 02:23 |
Let me select this code.
And then I'll copy it and let's bring it
| | 02:32 |
into the file.
I'm going to put it right after the end
| | 02:36 |
of line 40, and before the closing of the
inner div container for this phase.
| | 02:41 |
You know, paste it in.
And there's all our code.
| | 02:44 |
All right, let's move on to question 2.
This is a simple short answer question
| | 02:53 |
that we can quickly hand code.
I'll put my cursor right after the question.
| | 02:58 |
Begin a new line, and then enter the
code.
| | 03:01 |
We'll start with a paragraph tag, and
then put in the input tag.
| | 03:05 |
(SOUND) I'm going to give this an id of
desiredCourse and a type equal to text.
| | 03:12 |
And I'll use a HTML 5 attribute
placeholder and set that to desiredCourse.
| | 03:31 |
Okay, let me close off the input tag.
Now we're ready to move on to question 3.
| | 03:36 |
How long have you thought of yourself as
an artist?
| | 03:38 |
Again, the actual code for the selections
is a bit lengthy.
| | 03:42 |
So I've got it in my snippet file.
Let's go take a look.
| | 03:50 |
The interesting thing about Radio buttons
and this project is that we want to try
| | 03:54 |
to immediately grab the chosen option.
To do that, I've given each Radio button
| | 04:00 |
an individual ID, which we'll inspect
when the time comes.
| | 04:03 |
So let's pull in the basic code Into our
main file.
| | 04:08 |
I have it selected, I'll copy.
Back to survey.htm.
| | 04:13 |
And again, I'll place it after the
paragraph tag for that question that ends
| | 04:17 |
on line 117, and before the closing div
tag.
| | 04:21 |
Paste it in, and there are all of our
radio selections.
| | 04:25 |
Well those are the three questions, but
before we go lets include that JQuery
| | 04:29 |
helpful file I mentioned.
The code is by Adam Wulf, and it adds
| | 04:34 |
much needed functionality.
It's pretty robust, and it's also simple
| | 04:38 |
to use.
I'll head back up to the head section of
| | 04:42 |
our document.
First I'll add my script tag to include
| | 04:48 |
the file, which I've already downloaded
and have in my scripts folder.
| | 04:52 |
I'm going to put it in after the
modernizer script tag.
| | 04:58 |
Script type text JavaScript.
And we'll set the source equal to the
| | 05:08 |
Scripts folder.
And within that, we'll choose j query columnizer.min.js.
| | 05:13 |
Okay, let's close off the script tag.
Now, I'm going to move to a new line.
| | 05:20 |
And set up the j query script handler.
And then, add the code to put columnizer
| | 05:28 |
to use.
We'll do a standard dollar sign,
| | 05:33 |
parentheses, document, dot ready
function.
| | 05:45 |
(SOUND).
And I'll put a pair of curly braces after
| | 05:47 |
my function parentheses.
And now we just need one more line here.
| | 05:52 |
Dollar sign, parentheses.
The selector that we're going to be
| | 05:57 |
addressing is the class column.
So, dot column.
| | 06:01 |
And then dot columnize because it is the
columnizer, after all.
| | 06:11 |
And follow that with a pair of
parentheses, and a pair of curly braces.
| | 06:15 |
And within that, the property columns.
This is the number of columns that you want.
| | 06:22 |
And we want two.
So I'll enter that, and at the end of the
| | 06:26 |
line, put my closing semi colon once, and
then at the end of the document ready function.
| | 06:34 |
Let's save the page so we can make sure
that our columns are lined up correctly.
| | 06:39 |
As you can see when I scroll down, we're
not in cube mode yet So all the questions
| | 06:44 |
are laid out, one after another.
But there's the first question and things
| | 06:48 |
are looking pretty good column wise.
And there's the text field for the second question.
| | 06:53 |
And my radio buttons for the third.
Well, that's three down, two to go.
| | 06:59 |
Next we'll take advantage of some html
five functionality and integrate a user
| | 07:04 |
friendly slider into our survey.
| | 07:06 |
| | Collapse this transcript |
| Incorporating a slider| 00:00 |
When you need to specify a number from a
range of values, what better form control
| | 00:05 |
is there than the range input type.
Newly introduced in HTML5, the range
| | 00:09 |
input type needs some love to implement
successfully across modern browsers however.
| | 00:16 |
I'll share that love as we insert the
last two questions in our survey.
| | 00:21 |
The basic coding for the slider control
is pretty straightforward so let's head
| | 00:25 |
on down to the fourth question.
You'll find that starting on line 145.
| | 00:38 |
(SOUND) So I'll place my cursor after the
question, hit Enter.
| | 00:41 |
Put in a new paragraph tag.
And now, let's put in the basic input
| | 00:45 |
tag, given a type equal to range, And we
have some very specific attributes that
| | 00:54 |
we could add.
We can put in a minimum, you know there's
| | 00:56 |
a min, set that equal to 0.
Next, max and let's set that to 24.
| | 01:06 |
So, we have the minimum value of 0,
maximum of 24.
| | 01:10 |
Let the user decide what they want to
indicate.
| | 01:13 |
And we'll set the initial value at 0.
Okay, I'll close off the input tag.
| | 01:21 |
Now the first problem with the range
control, which is rendered as a slider,
| | 01:25 |
is that there's no built in way to show
the values the slider position represents.
| | 01:31 |
So we're going to need to add another
input field, a text field.
| | 01:36 |
And I'm going to put that within it's own
paragraph tag, again input tag.
| | 01:43 |
This time a type of text, and then we're
going to give this one an ID of hoursPracticeValue.
| | 01:51 |
I forgot to put a ID in the range input
tag.
| | 01:53 |
So let me just do that really quickly.
ID equals hours practice.
| | 02:07 |
Now that makes hours practice value make
sense.
| | 02:11 |
And let's add a placeholder here.
I'll set that equal to move slider.
| | 02:19 |
from 0 to 24 hours.
Okay, so we'll finish off the tag.
| | 02:27 |
So now the next thing that I need to do,
beside giving each of these their own
| | 02:32 |
separate id, is I'm going to add an on
Change Event to the range input type.
| | 02:38 |
So whenever anyone changes the slider on
Change, we're going to go to the function
| | 02:49 |
called Print Value and pass a couple of
arguments in.
| | 02:54 |
The first is the ID of the range slider
itself Hours practice, follow that with a comma.
| | 03:05 |
And then the second argument is the ID of
the text field.
| | 03:10 |
Hours practice value, Alright that looks
good.
| | 03:19 |
So now, let's add the java script to
power the function - print value.
| | 03:24 |
We are going to head back up to the head
section, only the slightest pun intended there.
| | 03:31 |
And I'm going to put this in my script
tag but after the document ready function.
| | 03:37 |
This is non jquery code, so we want to
place it outside of the jquery specific code.
| | 03:43 |
I'm going to go ahead and just add in a
little comment here, update text field
| | 03:49 |
for slider.
And we'll create the function print value.
| | 03:55 |
Function print value parenthesis this
takes the two arguments the slider I.D.
| | 04:04 |
and then the text box.
Put in our open and close curly braces
| | 04:11 |
and we're going to declare a couple of
variable x and y, Var x is going to be
| | 04:16 |
equal to
document.GetElementById(textbox), and y,
| | 04:26 |
you probably see this coming, is going to
be equal to document.
| | 04:36 |
getElementById, slider ID.
Now, once we have those two, we can make
| | 04:44 |
the value of one equal to the value of
the other.
| | 04:48 |
So, we're going to be pulling the value
from the slider, which is y.
| | 04:52 |
And using that value to specify the x
value in the text box, so x.value equals y.value.
| | 05:03 |
Now this function will be called at this
point whenever the slider is changed,
| | 05:08 |
however we need to set it up initially,
so we're going to put in a window on load event...
| | 05:17 |
(SOUND) And set that to the function,
printValue and then pass in the ids of
| | 05:30 |
our slider hoursPractice.
And the ID of our text field.
| | 05:42 |
And I'll close it all off with a
semicolon.
| | 05:44 |
Now, we'll need one more patch to make
our slider work across the browser spectrum.
| | 05:51 |
For whatever reason Firefox Has not yet
gotten around to implementing the range
| | 05:56 |
input type.
It is, however, in their roadmap for an
| | 05:59 |
upcoming release.
But in the meantime, we can thank Frank
| | 06:03 |
Yan for providing a solution called
html5slider.js.
| | 06:08 |
I've already downloaded my copy from his
GitHub site.
| | 06:12 |
And placed it in my scripts folder, so
all I need to do is to link to it with a
| | 06:17 |
script tag.
Let's put that code right after the
| | 06:20 |
script tag that calls columnizer.js.
Script type equals text Javascript...
| | 06:35 |
(SOUND) And the source is equal to
scripts and the script we're looking for
| | 06:42 |
is HTML 5 slider dot js.
Let's close the tag and we're good to go.
| | 06:48 |
Now before we take the slider for a spin.
Let's go ahead and populate that final
| | 06:54 |
question, just to get that out of the
way.
| | 06:56 |
Again, it's a little bit of code, so I've
put it in the snippet file for us.
| | 07:00 |
Open code.htm, from the assets folder in
this lesson.
| | 07:05 |
This code is a series of check boxes,
just like our first question.
| | 07:09 |
So, no additional tour is needed.
I'm just going to select the code, copy
| | 07:15 |
it, and head back to the survey.
Now we'll scroll down quite a ways to
| | 07:19 |
around one line 172 where we find
question five, who have you shared your
| | 07:25 |
work with?
And I'm going to put this right after
| | 07:29 |
that closing paragraph tag, Paste it in.
Okay, so let's save the page so we can
| | 07:34 |
see where we stand.
I'll head on over to the browser and
| | 07:39 |
refresh to make sure we've got
everything.
| | 07:41 |
So, let me scroll down.
Question, one, two, three, there's our
| | 07:45 |
new questions four and five, and there's
our slider, set to zero.
| | 07:50 |
Let's try it out.
Well, it seems to be working quite well.
| | 07:53 |
Alright, I'm up to 12 hours a day
practicing my art, I'm going to be tired.
| | 08:01 |
So all the questions are now done.
In the next chapter, we'll convert this
| | 08:05 |
flat 2D layout into a spinning 3D cube.
| | 08:09 |
| | Collapse this transcript |
|
|
3. Crafting a 3D Survey CubeSetting up the CSS transitions| 00:00 |
Have you ever taken a cardboard box apart
to flatten it out?
| | 00:04 |
We have to do that all of the time in my
building in New York City for recycling purposes.
| | 00:08 |
And I have to confess, I find it
fascinating that some designer can take a
| | 00:12 |
flat piece of cardboard and turn it into
a box.
| | 00:15 |
And that's pretty much what we're
going to do in this movie, take a series
| | 00:17 |
of flat two-dimensional content and
transform them into a box or more
| | 00:23 |
specifically a cube.
In this lesson, we'll set up the CSS for
| | 00:27 |
presenting a 3D-type image by
establishing the perspective and the
| | 00:32 |
transform style.
In my code editor, I've got the HTML file
| | 00:36 |
for the project open.
It's the survey.htm file from chapter 3.03.01.
| | 00:42 |
Now, before we add a link to our CSS
transitions file, I want to remind you of
| | 00:46 |
the two divs we are targeting for our 3D
object.
| | 00:50 |
The outer container is a div with the ID
of the art.
| | 00:52 |
Let me scroll down a bit to that.
You can see it there on line 49.
| | 00:59 |
And right below it is the div cube.
You remember that it takes one element
| | 01:04 |
nested inside another to create a 3D
space with CSS transforms.
| | 01:09 |
Okay.
Now, let's go and link to that CSS file
| | 01:12 |
that will hold the transitions and
transform rules.
| | 01:15 |
Back to the head section.
And we're going to put this right after
| | 01:18 |
my other link tag.
I've already created part of the file and
| | 01:25 |
it's located in the Styles folder and
it's called transitions.css.
| | 01:30 |
So I'll put in the rel attribute and
let's just take the media attribute that
| | 01:37 |
we see above here, screen and projection.
Okay, that's it for the HTML.
| | 01:44 |
Now, let's get rolling on the CSS.
I need to open up the transitions.css
| | 01:50 |
file that we just linked to.
Now, the first thing we need to do is to
| | 01:54 |
set up the perspective.
And as I said, that's done on the outer
| | 01:57 |
container that surrounds the div that
holds our cubed content.
| | 02:02 |
That outer container in our code is the
div with the id of the art, which is the
| | 02:06 |
first rule here, so we'll just add on to
that.
| | 02:09 |
Now, all of these CSS transition rules
that I'm going to do, as I noted in
| | 02:13 |
Chapter 1 when we were talking about the
technology, I'm going to go ahead and use
| | 02:18 |
the browser-specific formats as well.
So you'll see a lot of dash webkit, dash
| | 02:24 |
moz, dash o for opera and so on.
Now, in many of the properties, browsers
| | 02:28 |
actually do support the generic code.
So I'd be including that also, but I like
| | 02:34 |
to include the browser's specific code
for maximum compatibility with earlier
| | 02:38 |
versions of the browsers.
Don't worry, once you get into the groove
| | 02:41 |
of it, it's pretty easy to copy paste
change.
| | 02:44 |
So we'll start with the perspective
feature, and I'm just going to put in -webkit-perspective.
| | 02:52 |
There it is.
And we're going to give this a sort of
| | 02:54 |
medium-ish value of 1000 pixels.
Now, I'm just going to Copy that line,
| | 03:02 |
and then I'm going to Paste it in four
times.
| | 03:06 |
I find this to be the most efficient way
to add this browser specific code.
| | 03:10 |
So, let's change web kit to moz for
Mozilla.
| | 03:13 |
In the next one, we'll go with ms for
Microsoft.
| | 03:16 |
The fourth one is o for Opera.
And, the last one we'll get rid of dash
| | 03:21 |
web kit dash all together.
And there's our generic code.
| | 03:24 |
Now, we'll need to work with the next
rule, cube.
| | 03:27 |
The perspective property we've just
entered has set up the 3D for its
| | 03:31 |
immediate child, which is the div with
the ID of cube.
| | 03:35 |
And now, we need to pass that perspective
on to the cube's children.
| | 03:39 |
That's the faces of our cube that will
hold the survey questions.
| | 03:43 |
And that's done with the transform style
property set to preserve 3D.
| | 03:49 |
Again I'm going to go to the end of my
rule there and let's enter in the first
| | 03:55 |
which is going to be
webkit-transform-style.
| | 04:01 |
And we'll set that to preserve-3d.
A semicolon there and now we're ready to
| | 04:07 |
copy that line.
And paste it four times.
| | 04:12 |
Okay.
Let's go through our little routine.
| | 04:15 |
Change the second webkit to moz, the
third to ms, the fourth to o and the
| | 04:22 |
fifth we'll get rid of all together.
Pretty soon, you'll understand the steps
| | 04:26 |
to this dance without any problem.
Next, we'll need to add a series of
| | 04:30 |
declarations to the same rule so the
transition can take place.
| | 04:34 |
It's also where you set the duration of
the transition.
| | 04:37 |
For this project, we'll make the duration
one second.
| | 04:40 |
The generic declaration is transition
transform one s.
| | 04:45 |
S for second, of course.
And of course, we'll enter the browser
| | 04:48 |
specific versions for maximum
compatibility.
| | 04:51 |
Okay, let's put in the first of our
transition statements.
| | 04:54 |
-webkit-transition: we keep the browser
specific prefix for the transformed
| | 05:03 |
property as well.
So its webkit-transform 1s.
| | 05:05 |
Okay, you know what's coming next.
Copy and paste it four times.
| | 05:17 |
Now, of course, when we change the
browser specific prefix for transition,
| | 05:21 |
we also need to do it for transform.
So a little bit of doubling of the effort
| | 05:26 |
here, but certainly worth it.
Okay I've done Mozilla, Microsoft.
| | 05:32 |
Here's Opera.
and now let's get rid of the web kit
| | 05:37 |
altogether so we will have a completely
generic WC3 approved rule.
| | 05:42 |
Good, our transition and transformed
foundation has been well laid.
| | 05:46 |
In the next lesson, we will specify rules
for the different faces of the cube.
| | 05:51 |
| | Collapse this transcript |
| Building the cube| 00:00 |
Alright, now we're ready to start
building our cube.
| | 00:03 |
This will take six CSS rules.
One for each side of the cube.
| | 00:07 |
In all but one, we'll set up two
transforms.
| | 00:09 |
One to rotate the side properly, and one
to move or translate it into position.
| | 00:15 |
Let's start with the exception, the
front, which because it is the front
| | 00:18 |
facing part of the cube doesn't need any
rotation.
| | 00:22 |
So, I'm in the transitions.css file, from
the chapter 3, 03, 02 styles folder.
| | 00:27 |
Let's move to the bottom of the page, and
start with our first rule.
| | 00:32 |
I'm going to put in a little white space
here, just to scroll the page up.
| | 00:35 |
So, we're going to target Cube, and the
class of front.
| | 00:41 |
That's our first panel.
Now again we're going to be using the
| | 00:45 |
browser specific versions, as well as the
generic.
| | 00:48 |
So, we'll put in hyphen web kit, hypen
transform.
| | 00:54 |
Colon move the front along the z access
225 pixels.
| | 00:58 |
So instead of move, CSS transition use
the term translate.
| | 01:04 |
Translate Z, notice it's upper case, and
then parenthesis 225 px.
| | 01:10 |
Alright, lets copy this.
Four times of pasting, and one more.
| | 01:18 |
And we'll change the prefixes for the
first three of course, and then get rid
| | 01:26 |
of it altogether for the last one.
So where did we get the value of 225?
| | 01:31 |
Well, it's one half of the width of the
image, which is 450 pixels.
| | 01:37 |
Now, you may also be wondering why we had
to do anything at all for the front.
| | 01:41 |
Well, because we're going to translate
all the other sides into position, if we
| | 01:45 |
didn't do it for the front, it would
appear inset, and reveal the cube structure.
| | 01:49 |
Okay, let's move to the back.
Our next phase, here.
| | 01:53 |
We'll need to take the image and rotate
it on the x-axis 180 degrees.
| | 01:58 |
So that it's facing completely opposite
from the front.
| | 02:02 |
We also need to translate it along the Z
index.
| | 02:04 |
The same amount, 225 pixels.
In addition, we'll need to set the
| | 02:09 |
Backface Visibility property to hidden,
to avoid content peeking through.
| | 02:13 |
And of course as with other transition
transformed properites, we'll add the
| | 02:17 |
browser specific version.
So I'll enter in hash cube.back.
| | 02:24 |
Lets do our webkit transform first.
(SOUND) Colon, and the first transformed
| | 02:31 |
property is rotate x.
And we want that to rotate negative 180 degrees.
| | 02:42 |
Now we can add a second transform
property, just by delimiting it with space.
| | 02:46 |
And we'll put in translate z.
And that value will be 225 pixels.
| | 02:55 |
Alright, semicolon at the end of that.
And, this one is ready to be copied and pasted.
| | 03:02 |
So let's do our little conversion here,
from WebKit to Mozilla to MS for
| | 03:10 |
Microsoft, to Opera, and then to Generic.
Now as I mentioned, we also need to put
| | 03:17 |
in the backface visibility property.
Again, we'll start with WebKit.
| | 03:27 |
And make that hidden to copy the line and
I'll paste it in four times.
| | 03:35 |
Okay, web kit becomes mozilla, becomes
ms...
| | 03:41 |
Comes Opera, and then goes away.
That rule's complete.
| | 03:45 |
Now let's work on the sides.
These will need to be rotated on their
| | 03:52 |
y-axis 90 degrees so that they're
perpendicular to the front, and they'll
| | 03:56 |
also need to be translated.
We'll rotate the right face a positive 90
| | 04:00 |
degrees and the left a negative 90.
So selector here is hash cube.right
| | 04:06 |
webkit-transform:rotateY notice that X Y
and Z are always uppercase.
| | 04:21 |
And we want this to go ninety degrees.
And then translate Z, or value of 225 pixels.
| | 04:32 |
Let's copy the line and paste it four
times.
| | 04:44 |
I can see somebody making a competition
out of this at some point, if they
| | 04:47 |
haven't already.
Now we also need to bring in the back
| | 04:51 |
face visibility.
And luckily we can just copy and paste
| | 04:54 |
that in.
Because there are no values that are changed.
| | 04:58 |
I just realized that because I was in the
groove of adding in these browsers
| | 05:01 |
specific prefixes, that I put in one for
Microsoft on Backface Visibility.
| | 05:07 |
And it doesn't really need it, because
Internet Explorer supported the generic
| | 05:11 |
property Backface Visibility from the get
go.
| | 05:13 |
And they never had a browser specific
version.
| | 05:15 |
So let me just go back and Erase that one
and this one.
| | 05:20 |
Okay, now we're ready to move on to cube
left.
| | 05:24 |
Now, this one, I only need to change the
rotate y degrees from a positive 90
| | 05:29 |
degrees to negative 90.
So, I'm just going to go ahead and copy
| | 05:32 |
the whole thing, paste it in, change
right to left and then, go in and drop in
| | 05:41 |
some negative signs.
(SOUND) That was pretty quick.
| | 05:47 |
Okay, four down, two to go, the top and
bottom to be exact.
| | 05:51 |
Just as we rotated the sides on their y
axis by 90 and negative 90, we'll do the
| | 05:56 |
same for the top and bottom, but use the
x axis instead.
| | 06:00 |
And that's going to make this whole next
step really quick, because all we need to
| | 06:04 |
do is copy these two cubes right and
left.
| | 06:10 |
I'll scroll down so you can see the whole
thing.
| | 06:11 |
I'm going to temporarily add a line in
between, just so we don't get them confused.
| | 06:16 |
I'm going to past them in.
Now, this first one, the right, I'm
| | 06:19 |
going to change to top.
And instead of rotate y we're going to
| | 06:24 |
make it rotate x so now that I have that
one I'll just copy it and I can pretty
| | 06:29 |
quickly select and paste.
That one's done let's do the same thing
| | 06:36 |
for the next one instead of cube left.
Let's change it to cubed bottom, and
| | 06:43 |
again we'll change rotate y to rotate x.
I already have it copied in my clipboard,
| | 06:48 |
so all I need to do is select and paste.
And you thought that was going to take a
| | 06:53 |
lot longer, didn't you?
The actual building of the cube from a
| | 06:57 |
flat to 2D space is now complete, but
it's not quite baked enough to take a
| | 07:01 |
look at in the browser.
In the next lesson, we'll complete the
| | 07:04 |
CSS and take a look then.
| | 07:06 |
| | Collapse this transcript |
| Completing the CSS| 00:00 |
In the previous lesson we set up the CSS
rules for the cube faces in their default positions.
| | 00:05 |
In this lesson we'll establish a similar
set of rules to move them front and center.
| | 00:10 |
When in other words each face is showing.
Again I have the transitions.css file
| | 00:15 |
open and I'm going to go to the bottom of
the file.
| | 00:20 |
And let's again create a little white
space.
| | 00:22 |
Now all that's left to do is to add the
rules that govern the show classes like
| | 00:28 |
show front show top and so forth.
These classes are added to the parent container.
| | 00:33 |
In our case that's the DIV with the ID of
the art whenever the corresponding
| | 00:38 |
navigation is clicked.
Each class will contain the Transform
| | 00:41 |
properties to move the cube side, to the
front.
| | 00:44 |
So, let's begin with the front face.
I'll enter in #cube.show-front.
| | 00:53 |
Be sure not to put a space in between
cube and the class show front because
| | 00:58 |
this class is added to cube its not in
the DIV that follows.
| | 01:03 |
As when we set up the front face for the
cube there's no rotation involved just a
| | 01:07 |
translation or movement along the z axis.
Whereas previously, the value for the
| | 01:13 |
Translate property was a positive 225
pixels.
| | 01:16 |
Because we're moving it back into
position, we'll use a negative 225.
| | 01:21 |
So -webk-transfrom: translate z( -225 px
).
| | 01:36 |
Copy that line, paste it four times.
And then swap out the prefixes for the
| | 01:43 |
first three copies, and get rid of the
last webkit altogether.
| | 01:50 |
Okay, now, let's turn to the back.
Here, and with the rest of the cube
| | 01:55 |
sides, we'll perform a rotation as well
as a translation.
| | 01:59 |
And we'll keep the same values, but make
them the inverse of what they were when
| | 02:03 |
we set up the cube.
So, if the values are positive we'll make
| | 02:06 |
them negative, and if they're negative,
positive.
| | 02:08 |
The selector is #cube.show-back.
And the first declaration,
| | 02:17 |
-webkit-transform;translate z ( -255 px )
and then after that a space, and then our
| | 02:28 |
second property.
Rotate x 180 degrees, DEG.
| | 02:38 |
Okay, let's do our wonderful copy paste
dance.
| | 02:53 |
Let's follow that same pattern for the
right and left side of the cube.
| | 02:58 |
Hash cube dot show right.
To speed things up I'm going to copy the
| | 03:04 |
show back declarations and pace them here
under show right and then make two changes.
| | 03:10 |
We'll change rotate x to rotate y and
we'll change the 180 degrees because this
| | 03:18 |
is a side and not the back to negative 90
degrees.
| | 03:22 |
Okay.
So now that I have that whole thing, I
| | 03:24 |
can copy, and do a quick replacement.
A lot of times when you're doing work
| | 03:34 |
that is very repetitive I find it helpful
just to change it up a little bit and to
| | 03:38 |
find patterns within your working, so
that anything you can do to make it a
| | 03:42 |
little bit more efficient.
Now to do the left side basically the
| | 03:45 |
same as cube right except instead of a
negative 90 degrees we'll do appositive,
| | 03:51 |
so again I'll copy cube show right, paste
it in, change it to show left, and then
| | 03:57 |
let's just go in and get rid of the
negative signs.
| | 03:59 |
Finally.
Let's do the same thing, reversing the
| | 04:05 |
signs as it were, for the top and bottom
of the cube.
| | 04:08 |
Again, they're very similar, so I can
copy these last two rules, show right,
| | 04:13 |
show left, and then paste them in.
Change show right to show top, and
| | 04:21 |
instead of rotate y Make it rotate x.
The negative 90 degrees holds as well as
| | 04:28 |
the translate z negative 225.
And for the bottom, let's change
| | 04:35 |
show-left, our copy of show-left to,
show-bottom.
| | 04:43 |
Then we'll quickly paste in Rotate x, to
replace rotate y for all the declarations
| | 04:50 |
in that rule.
Let's save that page, because the CSS is done.
| | 04:54 |
Now we can take a, quick look at the
browser.
| | 04:56 |
You're going to see much, because the
navigation has been added, yet.
| | 05:01 |
But it's always good to get whatever
gratification you can whenever you can.
| | 05:05 |
And when I refresh the page if you recall
the last time that we took at the page we
| | 05:09 |
had all of our questions stacked up.
One on top of another.
| | 05:12 |
Now you only see the first question and
all the others are structured in the cube
| | 05:17 |
which at this point because we don't have
the navigation added yet.
| | 05:20 |
We can't get to.
That comes up in the next lesson.
| | 05:23 |
| | Collapse this transcript |
| Adding navigation| 00:00 |
In the previous lessons, we set up the
initial CSS rules necessary for
| | 00:04 |
transforming two dimensional content into
a three dimensional cube.
| | 00:08 |
In this movie we're going to ad the
necessary Javascript to make it interactive.
| | 00:13 |
To start let's bring in two Javascript
helpers.
| | 00:16 |
First I'm going to link to a series of
utilities put together by David (UNKNOWN) ...
| | 00:21 |
Whose tutorial on 3D cube, was the basis
for this implementation.
| | 00:26 |
He has a github page that includes a
wealth of information on CSS transforms.
| | 00:32 |
I'll insert the code right after the
script tag that brings in modernizer.
| | 00:35 |
So its script type equals text
JavaScript.
| | 00:46 |
And the source already downloaded into my
scripts folder, is called utils.js.
| | 00:55 |
Now let me open up that file to show you
what's included.
| | 00:58 |
First are a small collection of functions
for adding and removing classes from a
| | 01:02 |
job of script library called pastry kit.
Next is a function also from PastryKit
| | 01:12 |
for that equates touch actions with the
appropriate mouse ones.
| | 01:14 |
Followed by a bit of code to set up an
event handler.
| | 01:17 |
Then, after a quick scroll down.
Starting on line 45, we have the
| | 01:23 |
Javascript code that checks modernizer.
To make sure that the functionality
| | 01:27 |
needed is available.
And finally, the initialization section
| | 01:30 |
that establishes the name space.
So the next file we need to include is
| | 01:34 |
our custom survey.js file.
I'll put that on the next line.
| | 01:41 |
And, this too is in our, scripts folder.
And it's called custom_survey.js.
| | 01:53 |
Let's switch to that page.
(SOUND) This is where we'll be adding in
| | 01:57 |
the code in the next chapter to save some
of the question answers for review.
| | 02:01 |
There's already a bit of code on the
page.
| | 02:03 |
This initial functionality that handles
the actual CSS class removal and addition
| | 02:08 |
whenever a next or previous button is
clicked was derived from other code by
| | 02:13 |
Dave (UNKNOWN).
To take advantage of this code we're
| | 02:16 |
going to need to insert a set of input
tags to act as next and previous buttons
| | 02:20 |
for each of the cube faces.
Let's go back to survey.htm to do that now.
| | 02:27 |
So I'm going to scroll down to where I
find the first question and then I want
| | 02:30 |
to go to the end of that question looking
at line 121.
| | 02:37 |
Now, you may recall that the first
question is a little bit different from
| | 02:40 |
all the others.
Because we had two columns of check boxes.
| | 02:43 |
That column was all maintained in a div
with a class of column.
| | 02:48 |
We want to put in our input buttons right
after that div.
| | 02:52 |
So that div ends on 121.
I'll put in my paragraph tag here, and
| | 02:58 |
give it a class of show hyphen buttons,
close that tag.
| | 03:05 |
And on the next line I'll put in one
input button.
| | 03:09 |
This is for the initial page.
So on this page we only have one input button.
| | 03:15 |
Give it a type of button.
And a class and a class here is critical,
| | 03:21 |
because this class determines what the
next phase to show is.
| | 03:26 |
And you can see right below the next
phase that we have on line 126 is back.
| | 03:32 |
So we want to show back.
This button will be positioned over to
| | 03:38 |
the right.
And I have an align right class set up.
| | 03:41 |
So I'll add that, and then give it a
value equal to next.
| | 03:47 |
Okay, that's the end of the input tag.
Now let me go ahead and close off the
| | 03:53 |
paragraph tag.
Alright, lets copy that paragraph, and
| | 03:57 |
we'll use that as the basis for the cube
two phase.
| | 04:00 |
I'll scroll down and I'm going to
position it right after the input tag
| | 04:05 |
with an ID of desired course.
Paste that in, I'm just going to copy the
| | 04:10 |
input button and paste it in again.
Now the first button in this group will
| | 04:15 |
actually be the previous button and we
want it to go to the question before
| | 04:22 |
which was on the front face, so we change
show back to show front, one more change,
| | 04:28 |
we align it to the left...
Now the only other thing we need to
| | 04:32 |
change is in the second button, the next
button We need to change that class from
| | 04:37 |
show back to show right.
And you see the show right class right
| | 04:41 |
there on line 139.
Okay now this paragraph tag is actually
| | 04:47 |
much more ready to be copied and pasted.
Lets go down to the bottom of cube three.
| | 04:55 |
The thing to look for is this double div
right here.
| | 04:58 |
And we want to paste our show buttons
right in front of those.
| | 05:01 |
And then we can make our adjustments.
Now, all we need to change are the classes.
| | 05:06 |
So instead of show front.
The previous button here is show back.
| | 05:11 |
And the next button will go to, show
left.
| | 05:15 |
Again, I'll just copy this to have the
most recent with me, and let's go to the
| | 05:20 |
bottom of Q4.
Where we want to go is line 179, there
| | 05:25 |
those closing div tags.
The previous button class becomes show right.
| | 05:30 |
And the next show top.
Onto Q5.
| | 05:36 |
It's kind of a lengthy one, and there's
our double div on line 214, paste it in,
| | 05:42 |
and show-right for the previous button
should be modified to show-left.
| | 05:47 |
Now, because this is the last question,
there is another variation.
| | 05:50 |
I'm going to give the second input button
here an ID equal to review.
| | 05:56 |
We'll need that so we can fire off some
specific functionality when this button
| | 06:01 |
is clicked.
And I want to change the class from show
| | 06:03 |
top to show bottom.
And as you can see, bottom is next panel.
| | 06:11 |
Copy that one more time.
Now the final face of the cube is the
| | 06:14 |
review and submit panel, so the button
code will be a bit different because one
| | 06:19 |
of the buttons needs to be the submit
button, so I'm going to go down past the
| | 06:23 |
table and insert this right after it says
thank you for taking our survey...
| | 06:28 |
Now the previous button, all we need to
do is change show left to show top.
| | 06:33 |
The next button let's get rid of the id,
change the button type to submit, remove
| | 06:40 |
the show class, we'll keep a line right,
and change the value to submit...
| | 06:45 |
Now, the CSS styling that we'll have in
place will make it stand out a little bit
| | 06:49 |
more and ti will fit in better with the
layout of our site.
| | 06:52 |
Okay, there's one more group of buttons
that we need to add to complete the
| | 06:55 |
navigation and those are the modify
buttons that allow the user to go back to
| | 06:59 |
a specific page and change it.
Those buttons go in the third column of
| | 07:03 |
the review table...
Let's do one and then we can Copy, Paste, Alter.
| | 07:07 |
So, I'm going to scroll back up to the
top of the table.
| | 07:10 |
And you can see the third TD tag in each
of the TRs has a class of show buttons already.
| | 07:16 |
So, that's where our input tag needs to
go.
| | 07:18 |
So, I'm going to put in Input, Type
equals button.
| | 07:23 |
Class and this class will vary according
to whatever the face is that we want to
| | 07:28 |
go to.
Now the first one is show front values
| | 07:33 |
will be the same for all of them modify.
Okay so that's the tag I'm going to
| | 07:39 |
select the entire tag copy it and then
paste it in the third table cell for the
| | 07:46 |
next row.
And all we need to do, again, is just
| | 07:49 |
change the class.
So the second one for the second question
| | 07:52 |
is back.
For the third question is right.
| | 07:58 |
The fourth question, left.
And the last one we need to put in we'll
| | 08:07 |
change to top.
Because we're already on the bottom.
| | 08:10 |
All done.
So let's save the page and see what we got.
| | 08:15 |
So I'll hit refresh and I scroll down and
there's my next button.
| | 08:20 |
Let's try it out.
we have movement.
| | 08:24 |
We're onto Q2, Q3, Q4, Q5.
Okay, let's run through the previous ones
| | 08:32 |
just to double check.
Previous, four, three, two, one.
| | 08:41 |
Excellent, one last check.
We'll go all the way to the end again.
| | 08:46 |
(SOUND) And, let's try going to the Q3 by
clicking on modify.
| | 08:53 |
Works perfectly, it's a thing of beauty
don't you think.
| | 08:56 |
In the next chapter, we'll complete the
project by populating the review panel.
| | 09:00 |
| | Collapse this transcript |
|
|
4. Storing the ResultsSaving with local storage| 00:00 |
We're going to use an HTML5 technology
called local storage to temporarily save
| | 00:05 |
answers to 3 of the 5 questions.
So that we can display them on the Review panel.
| | 00:10 |
We have to handle the other 2 questions,
that's Q1 and Q 5, differently because
| | 00:15 |
they involve multiple checkbox
selections.
| | 00:18 |
For now, let's open up the custom
survey.js file from the Chapter 4, O 4 O
| | 00:23 |
1 folder, and dive right in.
We're going to use an advanced JavaScript
| | 00:27 |
function called add event listener to
detect when a particular form control has
| | 00:32 |
been changed.
And then store that change value.
| | 00:34 |
We'll basically need two code chunks to
handle that.
| | 00:37 |
One, we'll setup add event listener.
And the other is the function that
| | 00:41 |
executes when the event is triggered.
We're going to start with the code for
| | 00:44 |
question two.
Courses that were not listed in the
| | 00:48 |
previous question, but desired.
To cover all of our bases with a text
| | 00:51 |
field, we'll listen for two different
events, blur and change.
| | 00:56 |
want to make sure to put this within the
init function.
| | 01:00 |
So I'll set up formElement equal to
document.getelement by ID, and looking
| | 01:12 |
for desired course.
And once we have form element, we can use
| | 01:21 |
that object and add our event listener.
And then pass in the three arguments, the
| | 01:27 |
event that we want to look for, the
function which is going to be called
| | 01:34 |
desiredCourseChanged, and then the
Boolean for useCapture, which we'll set
| | 01:41 |
to false.
So I wanted to do this for exact same
| | 01:46 |
form control but just use a different
event.
| | 01:49 |
So I'll copy it paste it in and then
change the event so now let's code the
| | 01:57 |
cooresponding function.
And that's going to go below the window
| | 02:01 |
add event listener function, desired
course changed parenthesis, and within
| | 02:09 |
the parenthesis e followed by a curly
brace.
| | 02:13 |
Now we'll set our target equal to
e.target.
| | 02:19 |
That will be the form element and then
establish another variable.
| | 02:23 |
The value, and set that to whatever the
target's value is.
| | 02:29 |
Finally, and this is where local storage
comes to play, we'll use that
| | 02:32 |
functionality to set an item called
desired course to the variable the value.
| | 02:39 |
So local storage, capital S.setItem,
capital I, parenthesis, and the end
| | 02:48 |
quotes, desiredCourse.
That will be the name of our local
| | 02:52 |
storage item, which corresponds to the
element ID.
| | 02:54 |
And then after that, the value close it
all off with a semicolon, and it's done.
| | 03:00 |
Next, we'll tackle question 3, which uses
radio buttons to find out how long the
| | 03:05 |
users have thought of themselves as
artists.
| | 03:08 |
Because we have 5 different ID's, one for
each answer, we'll need 5 similar, but
| | 03:13 |
unique, add event listener routines.
So, let's do the first one.
| | 03:17 |
And because we have this already set up,
we can pretty much copy and paste it and
| | 03:21 |
make a couple of quick changes.
So we want to change the ID, and our
| | 03:26 |
radio buttons are called Artist Length
and then a number from one to five.
| | 03:30 |
So Artist Length 1, and of course we want
to change the function name.
| | 03:35 |
So this will be Artist Length changed.
Now that we have that one this is pretty
| | 03:42 |
easy to copy paste and make some quick
changes, so I need to go four more times,
| | 03:47 |
so I'm just going to quickly paste those
in, that's artist length two, three, four
| | 03:51 |
and five.
And I'm just going to change it from the
| | 03:55 |
bottom up just to make sure that I don't
overwrite my one...
| | 04:00 |
Alright so there's artist length 1, 2, 3,
4 and 5.
| | 04:04 |
And even though there are five
addEventListeners for the third question
| | 04:07 |
they all reference the same function so
let's write that now.
| | 04:10 |
And we can take advantage of our
previously scripted one and just simply
| | 04:17 |
change the name of the function.
The first, and then we also want to
| | 04:21 |
change the local storage set item name.
So instead of desired course it becomes
| | 04:28 |
artist length.
One last question to take care of in this
| | 04:32 |
lesson, and that's question four, the
slider.
| | 04:34 |
So let's go and grab one of our form
element declarations, paste that in.
| | 04:41 |
We'll change the ID to hours practice.
And then use a little copy paste magic to
| | 04:50 |
change artists length changed to hours
practice changed.
| | 04:55 |
And now we will create that function,
again I can copy paste the one of them
| | 04:59 |
that's already existing.
And while we are in the copy paste
| | 05:03 |
function mode here, we'll use that to
change the function name.
| | 05:06 |
And then also the set item name that
corresponds to the the I.D.
| | 05:11 |
Okay, be sure to save your work.
In the next lesson, we'll add the
| | 05:14 |
routines for getting the value from our
two remaining questions.
| | 05:18 |
| | Collapse this transcript |
| Returning multiple checkbox values| 00:00 |
We're going to finish up the job of
getting the user answers in this lesson.
| | 00:04 |
And we'll get a jump on populating the
review table for the remaining two questions.
| | 00:08 |
We'll be using jQuery routines to loop
through the checkbox values in questions
| | 00:13 |
one and five.
So I've got survey.htm from the Chapter
| | 00:16 |
4, 04_02 folder open now in my code
editor.
| | 00:21 |
And I'm going to put the new code in my
existing document.ready function that you
| | 00:25 |
see starting on line 21.
Let's scroll down a tad so you can put
| | 00:30 |
that front and center.
(SOUND) So we want this routine to fire
| | 00:36 |
whenever the button with the review ID is
clicked.
| | 00:41 |
So I'll put in $('#review').
That's my review ID, and then
| | 00:47 |
.click(function() and then {}.
Now we can add in the code to get the
| | 00:58 |
values from question one, which courses
are you interested in?
| | 01:01 |
We'll set up a variable called interests
checked, as in what interests did you check.
| | 01:09 |
And we'll set that =
$('.interests:checked').
| | 01:19 |
Now you may recall that each of the radio
buttons has a class of interests.
| | 01:24 |
And what we're doing here is selecting
any of the tags with the class of
| | 01:28 |
interests that have been checked.
Makes sense, right?
| | 01:31 |
And then we'll use a JavaScript function
called map.
| | 01:34 |
(SOUND) This will pull in those values.
.map(function(), again, {} and what do we
| | 01:42 |
want it to do once the .map(function()
has been invoked?
| | 01:46 |
We want it to return $(this).val(), the
value.
| | 01:53 |
So anytime that a checked interest is
found, it'll take that value and return
| | 01:58 |
it, put a semicolon after val and then
move down one line.
| | 02:02 |
because we're actually still continuing
this code and put a .get and another semicolon.
| | 02:09 |
Now what that will do is take everything
that's returned and put it into interests
| | 02:13 |
check the variable.
Okay.
| | 02:14 |
So I'm going to go ahead, and select
this, copy it, and we'll do the same
| | 02:18 |
thing with a little variation for
question five, where we ask, who else has
| | 02:23 |
seen their work?
So I call that sharedChecked (SOUND) and,
| | 02:28 |
likewise, instead of the class being
interests, it's shared.
| | 02:31 |
And that's all the changes we need to do.
So, okay.
| | 02:33 |
We've got the values.
Why don't we go ahead and put them to use?
| | 02:36 |
I'm going to add a couple of lines of
code to each of these two blocks that
| | 02:40 |
will, together, populate the related
portion of the review table.
| | 02:44 |
Let's do interest check first.
(SOUND).
| | 02:47 |
We'll add a new line after that little
code block.
| | 02:49 |
And then, I'm going to reference the
section of my table where I want this to go.
| | 02:53 |
So, I'll put in my jQuery $('') and then
we want to reference the portion of the
| | 03:00 |
table where the interests are listed.
And I have that as an ID called InterestsResult.
| | 03:09 |
And then we want to replace that html
because we're going to to use a strong
| | 03:12 |
tag as part of our code.
So .html() and then, what are we
| | 03:18 |
replacing it with?
Well we are replacing it with
| | 03:20 |
('<strong>Interests: ').
And then a closing strong tag.
| | 03:31 |
Okay?
Close the line off with a semicolon.
| | 03:33 |
So now that we've replaced that HTML,
let's bring in our interestsChecked
| | 03:38 |
array, and we'll append that to the
string that we replaced in the previous line.
| | 03:42 |
So again, we'll grab the Selector here,
paste that in, and use the function append.
| | 03:50 |
And what we're appending to this, is our
variable InterestsChecked, but not just
| | 03:57 |
by itself.
We want to use the joined function, which
| | 04:01 |
will take out all the elements and array,
and list them according to whatever
| | 04:04 |
delimiter we put in, parenthesis.
And the delimiter we'll use, you put in
| | 04:09 |
quotes, is going to be a comma followed
by a space.
| | 04:12 |
jQuery is smart enough to put the commas
in the right place and to leave them off
| | 04:17 |
where it doesn't need them.
Again, we'll close off with a semicolon
| | 04:20 |
and now comes the easy part where we get
to copy the code we just did.
| | 04:25 |
And put it after shared check routine and
then make the changes there from nterests
| | 04:32 |
to shared in all locations.
Alright?
| | 04:41 |
I'll save the page.
I was just about to go to the browser,
| | 04:44 |
but I noticed a problem.
I left off the pound sign for both
| | 04:50 |
sharedResult and interestsResult, and it
would not have been able to find that
| | 04:54 |
selector without it.
(SOUND) So let's add those in.
| | 04:59 |
Now we'll save the page.
(SOUND) Go to the Browser.
| | 05:02 |
Let me hit Refresh.
And let's make a couple of choices.
| | 05:05 |
Let's say Ceramics and Photography.
Next, now we haven't set up questions
| | 05:11 |
two, three and four, so I'm going to skip
over those.
| | 05:14 |
And let's say I had a showing.
I'll click Next and there's my review
| | 05:21 |
table elements showing for the two
questions that I, we've already set up.
| | 05:25 |
Coolness.
Let's hurry over to the next lesson to
| | 05:28 |
finish up the project.
| | 05:29 |
| | Collapse this transcript |
| Displaying survey results with local storage| 00:00 |
Okay.
Homestretch.
| | 00:02 |
In this lesson, we'll add the code to
retrieve the answer values that we
| | 00:05 |
squirreled away in local storage, and put
them in the review table where they belong.
| | 00:09 |
I'm going to add these routines right
after the two that were in the previous
| | 00:13 |
lesson, in our jQuery document ready
function that you see starting on line 21.
| | 00:19 |
Okay.
I'll make a little room and then enter my
| | 00:22 |
first line, which sets up a variable
theDesiredCourse (SOUND) and we'll set
| | 00:25 |
that equal to localStorage.getItem
(SOUND) in parentheses and quotes (SOUND) desiredCourse.
| | 00:41 |
(SOUND) Next we'll do a little
concatenation to bring in the heading
| | 00:44 |
that's in the review table.
So we'll use that same variable, (SOUND)
| | 00:49 |
theDesiredCourse, and set that =
'<strong>Desired: </strong>'.
| | 01:03 |
(SOUND) Then outside of the quotes put a
plus sign and the variable theDesiredCourse.
| | 01:11 |
So now we want to take our string and put
it in to replace theDesiredCourse result
| | 01:17 |
area that we have on the table.
Just as we did with shared result and
| | 01:20 |
interest result.
(SOUND) So pound, (SOUND) because it's an
| | 01:26 |
ID, desiredCourseResult.html
(theDesiredCourse):.
| | 01:38 |
Okay.
Next, Q3.
| | 01:41 |
Again, this follows the exact same
pattern as a code we just entered.
| | 01:46 |
So let's do a copy-paste alter routine.
So this is going to change the variable
| | 01:50 |
form the desired course to the artist
length.
| | 01:56 |
(SOUND) And I'll change that local
storage item to artist length.
| | 02:01 |
And I'm just going to copy the variable
that we have there so I can replace it in
| | 02:04 |
the couple of places that we use it.
Part of our concatenation (SOUND) and we
| | 02:10 |
want to change desired to artist.
Finally, we also want to change desired
| | 02:16 |
course result to artist length result.
Okay, it looks good.
| | 02:23 |
Let's move forward.
I'll copy that again.
| | 02:26 |
Paste it in for our last one.
And now question four, how many hours a
| | 02:32 |
day do you practice?
(SOUND) So the variable is the hours practiced.
| | 02:38 |
Not great English, but we don't need to
be for a variable.
| | 02:42 |
And our getItem is hoursPractice.
I'll copy the variable and paste it in
| | 02:51 |
appropriately, the three places it needs
to go.
| | 02:55 |
Let's change our heading from artist
colon to hours colon.
| | 03:02 |
And then, of course, artist length result
becomes hoursPracticeResult.
| | 03:09 |
Okay, moment of truth.
I'll save the page, and with fingers
| | 03:13 |
crossed but ultimate confidence, check it
out in the browser.
| | 03:17 |
Let me refresh, and let's go through the
survey.
| | 03:20 |
So this time, what subjects am I most
interested in?
| | 03:23 |
You know, I've got a hankering to learn
about Glass and Jewelry.
| | 03:28 |
Next, what area study?
Well how about hm, Batik and oh, Origami.
| | 03:39 |
Next, how long have I thought of myself
as an artist?
| | 03:42 |
Well, seriously, all my life.
How many hours a day to you practice.
| | 03:47 |
again, seriously, about two.
Next, who have I shared it with?
| | 03:53 |
Really, only some friends.
So next, we go to the review, submit page
| | 03:59 |
and there's all my answers, cool.
Let's modify one to make sure that that works.
| | 04:04 |
So, you know, now that I think about it,
I actually have shared it with more than
| | 04:08 |
just friends.
So I'll go back to modify and I did show
| | 04:12 |
some teachers at one time.
Hit Next and the updates been made.
| | 04:18 |
Okay, we're done.
Let's hit Submit.
| | 04:19 |
(SOUND) Coolness.
| | 04:21 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
I really appreciate you taking my course,
HTML5 Projects, Creating Surveys.
| | 00:05 |
And hope that you find a number of uses
for it.
| | 00:08 |
If you want to dig a little deeper into
the CSS that powers the cube, check out
| | 00:12 |
my Lynda.com course, CSS: Transitions and
Transforms.
| | 00:16 |
Take care now, and we'll see you around.
| | 00:17 |
| | Collapse this transcript |
|
|
