For this week, we're going to do three things.
- Apply what we learned to build something a little big larger in scope.
- Extend what we learned to a new HTML/CSS tool that should make life a lot easier.
- Think about the DESIGN of our pages and how interaction might be used for learning.
You will design and build a prototype for an "interactive" web-based learning experience. This will be a minimum two-page website, which will include a student page (that mocks up an interactive experience) and a teacher page which is a lesson plan and part design explanation (to the teacher on how to use the student page.)
It will be interactive to the extent that you will use interactive HTML elements like buttons, forms, inputs and other interesting interaction UI and embedded components. You will use CSS to help support your interactions (e.g. to highlight important content, provide visual feedback to actions, add meaningful animations, etc.)
Your interactions do not have to be FUNCTIONAL yet. That's Javascript. This is just a proof of concept demo, so if it's clear how it would work... :sunglasses:
On the student page, you will present the student with a one-page "lesson" on some topic you'd like them to learn. This page will have some content as well as some "interactive" interfaces or aspects that support interaction in the broader sense. See "Thinking about Interactive Design" for more details.
Basically, you should think about:
- What is your learning objective?
- What do you think is necessary for students to reach the larger objective?
- How will I know if my students have achieved the objective?
In other words:
- What is your model of how you think learning happens in this context?
Being able to articulate this is your design. And consequently, will guide your page organization, squence, content, and activities. If you can think and explain your design like the following:
- Students need to be able to explain X, be familiar with Y, and do Z.
- It needs to happen in this order.
- Interaction can help achieve (X, Y, or Z) in this specific way.
- I know I have achieved my goals when (concrete example).
You have a good idea for a webpage.
The teacher page is where you will provide content for a teacher. This page will essentially provide a "lesson plan" of sorts for your teacher audience, relating to the student page. Essentially this is a place to accomplish two things:
- Explain the lesson objectives and important details.
- Explain how the student page is designed.
- Explain how the teacher might use the student page to extend the experience in non-digital ways.
For some of you, you might be using the student page as a supporting part of a larger interactive learning experience facilitated by a human teacher. This is perfectly okay. This is where you could provide the other side of the picture, so we know how a teacher led experience around the student page will unfold.
Before you start building, you should be thinking about what meaningful interaction is. For example, one of the biggest things I always run into talking to students (and many professionals) is the infamous drag and drop interaction. The logic tends to always be the same.
Drag and drop is interactive. Interaction will keep people engaged. Thus, if I make this multi-choice question drag and drop. Learning will happen.
Usually then I like to ask:
So if I redesign SAT/GRE prep-work to be hundreds of drag and drop questions, students will be engaged and study more and ace the test?
People tend not to like me when I say this. But you get my point. There is a time and place for drag and drop interaction, when such an interaction helps users accomplish something easier in order to reach the goal they want (e.g. like sorting things.) Or for example, when drag and drop actually is directly tied to some learning aspect. See GOOD example:
I used drag and drop in order to emphasize how moving the sun around in the picture will change the angle of the shadow. It's through dragging and dropping the sun in various locations that the learner can see the differences and the relationships between the variables, height, length, and angle.
I want you to think about this and extend it to any sort of interaction you have planned. Is it interactive for the sake of being interactive? Or is it interaction that is sharpened to target a very specific thing? This is what I like to refer to as meaningful interaction.
Furthermore, interaction in my world - doesn't necessarily have to be directly digital or something of a direct user to computer manipulation. You could for example, have an embedded YouTube video that students watch.
The interaction is that the teacher prompts students to pause the video at certain time stamps and my page, has certain prompting questions to get students to think about, go back and scan the last 15 min of video to look for things they missed, etc. That process of having to go back and interact with the content, IS interaction. It necessitates students to engage directly with the content both physically and cognitively. In my project "interaction" is one where the digital computer takes a supporting role.
So what is it that you want to teach in this mini-lesson and what kind of creative interactive aspects could you mock-up based on what we learned? Please understand that sometimes, the most clever interactions are the ones that are not so "flashy." And good interaction often comes from carefully designed content (e.g. the specific questions asked, the clearest explanatory assets, etc.)
You will design and develop a 2-page website where the student and teacher pages are linked via hyperlink. You can choose whatever learning topic / objective you want. The student page should have some sort of meaningful interactive parts to it, implemented through HTML and CSS. It does not have to be functional yet as we need Javascript to do this right. But you can build example "mock-ups" of how a functional experience might look to give the feel for what this experience is like.
You should not spend a ridiculous amount of time creating custom content. You can use "demonstration" content to make your point, just make it clear by linking to the sources. You also do not have to include ALL details of your content. For example, if your page has a quiz, you don't need to include 100 questions. Seeing 3 good questions you designed and some demonstration of what a correct answer might look like and incorrect answer might look like is fine in terms of demonstrating the proof of concept.
If you are going to spend some time on content, spend it on a few really poignant examples. Like, a very well designed question to elicit a certain kind of learning interaction.
You should include some sort of traditional form and a range of different kinds of inputs somewhere in your page. If a traditional form is not appropriate for your actual learning, I'm fine with you creating a side page where you demonstrate the ability to create forms with different kinds of inputs as an aside (e.g. silly contact, survey, form.) Reason I ask for this is we will be using form inputs a lot to demonstrate Javascript so I want everyone to get some practice. That said, what I'm most hesitant about is that by making you build a form, your lesson design ends up being dictated by the form structure which is antithetical to the design activity really. You get my point though, I just want demonstration - even if it lies outside the immediate lesson design where you can be more creative.
Lastly, your code should be formatted super cleanly. Use the tidy or beautify function if you need help.
- You should submit a pristine, unquestionably cleanly formatted final code.
- Note that I will deduct points for sloppy code. A regular paper submitted to a conference that isn't formatted correctly gets rejected. This is no different but maybe even more egregious since it's so easy to fix this.
- Sloppy code that is submitted will be interpreted as a personal insult directed at me. 😱 You really don't want to do this.
- Use a variety of HTML/CSS to create your interactions, concepts of.
- Include a form somewhere in your pages, either as directly part of your lesson or as an aside. Include in the form the following input types:
<input type="text">
<input type="checkbox">
<input type="radio">
<textarea></textarea>
<select>
<option></option>
</select>
<button type="button">
This is optional but I'm actually pretty certain that taking the time to learn Bootstrap and Responsive Design will over the course of this week, actually save you time and help you build a better end product.
If you've struggled so far with margin padding, getting your page to align and look just right - Bootstrap and Responsive Design is the key to your struggle. Basically, people got fed up with these very issues and got tired of having to create their own basic CSS rules from scratch. So, people at Twitter created a CSS library with many different classes already styled, so you don't have to reinvent the wheel.
There is no FCC due this week. But, if you want to make your life easier I strongly recommend that you do the: FCC Responsive and then focus on the https://getbootstrap.com/css documentation. Particularly:
- Grid System which is the fundamental building block.
- Bootstrap CSS to get a look at the basic rules available.
- And scan through the Components Page to be aware of what you could play with.
Since this is a multi-page project, you will have two options on submitting this.
- Plunker - which can support multiple-page examples.
- Github Repository w/ GitPages Enabled
More on this next week.
Again, while there is no FCCs due this week, I think that you would highly benefit by doing the FCC Responsive as it will in the end save you time and frustration.