Join Joseph Lowery for an in-depth discussion in this video What we're going to build, part of HTML5 Projects: Creating Surveys.
In this lesson, I'm going to run through the completed creating survey project. So you can see what we'll be building. If you're the type who likes to dive right into the code, and you've already downloaded the exercise files, you'll find the completed project in the Chapter 1, 01_01 folder. So here we are on the fictional Roux Academy site. As the page heading says, we have a student survey cube. So let me scroll down just a bit so you can see that better. And lets run through our survey. Our first question allows you to choose as many options as you'd like. Let's say I'm interested in oh, photography, glass, and sculpture. Okay.
What's next? So I'll click Next. and the cube moves. So now, the second question is just a short answer. What area of study didn't you see that you wish you did? I'm kind of into calligraphy. Now I can go back to my previous one if I want, or lets just go on. Next, how long have you thought of yourself as an artist? Well, you know, honestly pretty much since I was a kid. Okay, next. How many hours a day do you practice your art? None or let's see what the slider goes up to.
Four, five, six, seven, twelve. Oh, I can put in all the way up to twenty four, that's a dedicated artist. I'm not in that league, I'm going to go down to 3. Next 5 of 5, who have you shared your work with? Just family, friends? Well, I have shown it to some friends, and well, of course, teachers. So yeah, those two what's next? well there are my results. Now if there's something that I'm thinking about, I see my results here and I want to change something, like, lets say, how long have I been an artist.
Since I was a kid. I'll click modify. And, let's say, you know, honestly all my life. So then I'll page through, the other answers. And I can change any of them. Now once I've verified everything, I'll click Submit, and I see that our survey has been accepted. Alright. Pretty nifty, right? At the project's end, you can store the information in a database using PHP if you like, or email the results for processing. It's totally up to your implementation. In the next lesson, we'll explore the technologies that lie under the hood, so you can get a better sense of how everything works.
- Understanding the HTML layout
- Creating the form
- Crafting the initial questions
- Setting up the CSS transitions
- Adding navigation
- Saving and displaying answers with local storage