Responsive Website Basics Peer-graded Assignment

Make a responsive, interactive web page using HTML, CSS and JavaScript.

Instructions

Create a web page about yourself or a subject you are interested in, using JavaScript, CSS and HTML. Your submission should consist of 3 files:

A HTML document
A CSS document
A JavaScript document

You can also upload additional files such as jQuery or Bootstrap if needed.

The web page should have the following features:

It should display correctly if the person viewing it has placed all the files you have supplied in a folder on their machine
It should use at least one of each of HTML img, h1 and div tags (and more if needed)
It should use CSS to set the style of the text and other parts of the design as appropriate, in at least 3 ways.
It should be responsive - it should change the layout if the screen size changes
The user should be able to change the page in some way by interacting with a GUI element such as a button.

Write some text on the page explaining how the user can interact. You should implement this feature using JavaScript.

Assignment - Build a Responsive Web Page

Course Review
Peer-graded Assignment	due Jan 1	worth 30% of course
You passed! Congratulations.	earned 16 / 16 points	100%
Course assignments	passed 6/6	Final Grade 98%

Peer-grading

HTML & CSS: Describe something that you would particularly like feedback on regarding your use of HTML tag or CSS. You could say something like "Which part of my page do you think could be improved? Why?"

Help your peer. Either respond to the learner's request for feedback or complete this sentence HTML and/or CSS could be used for an even more interesting design by...

Peer Review
Miloš		Wow great job
Vitaly		Great work!
Marigianna		Nice work, the window that pops up when the "Show Help" button is clicked covers the "Close Help" button half way.

Responsiveness & Design Change: Describe something you would particularly like feedback on regarding either responsiveness or your GUI.

Help your peer. Either respond to the learner's request for feedback or complete this sentence responsiveness or the GUI could be improved by...

Peer Review
Miloš		Really impressive job GREAT! Just few thoughts. I would use add eventListener with 'keypress' or 'keyup' events instead of accesskey property. Because this property work different on some browsers/devices check this page: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey. And you should wrap all of your code in self executing anonymus function to avoid global namespace pollution.
Vitaly		Very good!
Marigianna		Very creative work, it looks like you have put a lot of effort in it. [see C2 button/browser problem] Other than that, well done.

Create a web page about yourself or a subject you are interested in, using JavaScript, CSS and HTML.

This is a demonstration Flash Card system which shows the user (learner) a series of facts in a learning sequence. The user controls when (s)he is ready to move from one 'card' to another using the software.

The system demonstrates how a "Flash Cards" approach may be a viable training medium.

Given the requirements of the assignment, this system-concept is far more complex than it needed to be. I also experiment with some other CSS facilities I've been wanting to explore. A concurrent conversation (discussed below) about training approaches, provided the motivation to attempt the task.

TL;DR? If you've read enough, scroll down to "Q2"...

The longer story:-

Whilst talking with a professor from a course completed some time ago, we considered alternative modes of training to the traditional lecture ("chalk and talk") or MOOC ("talking heads" video).

He suggested I take a look at the Smartly model. Their approach is largely predicated on three principles:

asynchronous teaching and learning over the Internet obviating the need to attend lectures at a particular time and place.
bite-sized course materials because people may not learn in units of one hour's time, and cognitive psychology related to 'attention span'.
using the mobile device because it appears to be today's preferred communication (and learning) medium.

My first impression of their course presentation was how much it reminded me of the Flash Cards we used to employ for drill learning, eg times-tables; foreign language vocabulary; historical events and dates; memorisation of state capitals, mottos, flowers, etc.

Accordingly, this submission reproduces flash cards in a training/learning mode - using our current course as a topical basis.

The assignment that the system be responsive to screen-size was managed using the Chromium (Chrome) browser's CDT facility (Chrome Development Tools). The default mode suits a Galaxy S5 smart-phone, or similar device, with a screen-size of only 360x640 pixels.

To prove the software is responsive, tablet users, eg iPad (768x640px), are treated to more information on a wider and deeper screen. Similarly, there is yet another format to suit PC displays (and even iPads, etc, in landscape mode).

Normally the user, (trainee or student) would first choose the course and module to be attempted, per the Coursera platform's equivalent structures. In this case, the demonstration is 'hard wired' to offer a single module for a single course.

The process involves displaying one 'flash card' after another - which neatly illustrates the assignment's requirement for programmed interactivity. It is possible to review previously-read material by using the "previous Card" control. There is also a Help facility.

For the purposes of this assignment the actual course content is immaterial (excepting to fulfill the assignment's requirement to display images and display correctly).

For my own amusement, facilities from the W3C CSS Transitions Editor’s Draft, 2 January 2017 (not really - I was working from an earlier draft!) have been explained and are used to 'ease in' and 'ease out' the Flash Cards and Help Panel, as the trainee proceeds through the course.

Your submission should consist of 3 files: A HTML document, A CSS document, A JavaScript document. You can also upload additional files such as jQuery or Bootstrap if needed.

HTML markup: flashcards.html (passed W3C validator, first time)
Style sheet: css/flashcards.css (passed W3C's "Jigsaw", first time)
JavaScript: js/flashcards.js

NB the CSS, JS, and graphic assets are organised into sub-directories

jQuery was not used: the interactive logic is pure JavaScript

Bootstrap was not used: but the inclusion of Font Awesome might have eased the hunt for Unicode symbols and icons!

Did the zip file contain the 3 required files? (HTML, JS, CSS)?
Note: Scroll down and flag this submission as incomplete if all three files weren't included.

Peer Review
Miloš	3 pts	Yes, all three
Vitaly	3 pts	Yes, all three
Marigianna	3 pts	Yes, all three
	9 pts

It should display correctly if the person viewing it has placed all the files you have supplied in a folder on their machine

The Coursera-downloadable RWPA zip archive (also available upon request) will expand to an RWPA directory (folder) and (above-mentioned) sub-directories.

Open the flashcards.html file using a professional web-browser and the accompanying CSS and JS files should link automatically.

NB some advanced CSS and JS facilities used in this machine are not available in the Opera Mini browser.

If other files were needed for correct display (e.g., jQuery or Bootstrap), were they included in the zip file?

Peer Review
Miloš	1 pt	No additional files were needed
Vitaly	1 pt	No additional files were needed
Marigianna	0 pts	No, something needed was missing. I had some issues clicking the buttons for some reason, and I had to reload the page for them to work. Maybe there was something wrong with my browser or a file was missing
	2 pts

It should use at least one of each of HTML img, h1 and div tags (and more if needed)

img tags: Images are embedded within most of the Flash Cards. The first one is visible immediately. The others will be presented as the user processes through the Flash Cards.

h1 tags: The page heading h1 within the header is always present on any sized display - although the heading is expanded with a sub-heading/jingle on larger displays.

div tags: These have been applied within the Help panel and the footer (only visible on larger displays). TL;DR? Lines 27 and 159 of the .html file (resp).

NB div tags are less necessary in HTML5 where 'best practice' prefers that semantic elements be utilised.

HTML Tags: Did the submission use at least one img tag?

Peer Review:
Miloš	1 pt	Yes
Vitaly	1 pt	Yes
Marigianna	1 pt	Yes
	3 pts

HTML Tags: Did the submission use at least one h1 tag?

Peer Review:
Miloš	1 pt	Yes
Vitaly	1 pt	Yes
Marigianna	1 pt	Yes
	3 pts

HTML Tags: Did the submission use at least one div tag?

Peer Review:
Miloš	1 pt	Yes
Vitaly	1 pt	Yes
Marigianna	1 pt	Yes
	3 pts

It should use CSS to set the style of the text and other parts of the design as appropriate, in at least 3 ways.

CSS is used to control the appearance (both presence/absence and formatting) of the Flash Cards, the Help Panel, and the screen layout.

Please refer to the provided .css file.

CSS Use: Did the submission use CSS to set at least 3 parts of the design?

Peer Review
Miloš	3 pts	Yes, set 3 or more
Vitaly	3 pts	Yes, set 3 or more
Marigianna	3 pts	Yes, set 3 or more
	9 pts

It should be responsive - it should change the layout if the screen size changes

The CSS is divided into three sections.

the first ~90 lines which cover all screen sizes but specifically styles for small screens, eg smart phones (less than 360px wide)
lines 92~123 offer improvements and extensions for tablets (less than 800px wide)
the latter section improves the display for users of full-sized screens

NB if you are fortunate-enough to use an Apple iPad device, you may see both the larger two formats by viewing the demonstration first in portrait mode, and then re-orienting to landscape.

The rest of us can use the emulation features of the development facilities built-in to most professional desktop web-browsers (I utilise Chromium and Firefox Developer's Edition).

Change the size of the page to the largest and smallest possible size. When the page size is changed, does the design change responsively?

Peer Review
Miloš	2 pts	Yes, for all sizes
Vitaly	2 pts	Yes, for all sizes
Marigianna	2 pts	Yes, for all sizes
	6 pts

The user should be able to change the page in some way by interacting with a GUI element such as a button.

At the bottom of the screen is a nav-bar consisting of one or more buttons. These buttons react to mouse-clicks and keyboard mavens may use short-cut keys.

The 'next' and 'previous' buttons enable the user to process through the deck (pack) of Flash Cards. The Help button (and its companion Close button) results in a new panel of assistance information being over-laid 'above' the courseware text.

These buttons are interactive in that they are only displayed when their functionality is available/logical.

Did the page contain instructions on how to use the GUI to change design?

Peer Review
Miloš	2 pts	Yes, I could easily understand them
Vitaly	2 pts	Yes, I could easily understand them
Marigianna	2 pts	Yes, I could easily understand them
	8 pts

Write some text on the page explaining how the user can interact. You should implement this feature using JavaScript.

This system demonstrates how it might be used in a training/learning environment.

When the trainee views the first screen, (s)he is presented with an instruction panel explaining how the system works.

To proceed, click on the "Next Card" button: the current card fades away and is replaced by the next.

To review previously-viewed course content utlise the "Previous Card" control.

The "Help" control will cause system usage instructions to 'pop up', and may be used at any time.

Once satisfied, the help enquiry may be concluded using the "Close Help" button. Whereupon the previously-visible courseware will become available once again.

At the end of the module (no more Flash Cars left to view - and no "Next Card" button to click) there is (currently) no facility to proceed to the next (because in this demonstration there is no 'next module'!), but in addition to the "Previous Card" button, using the browser's Refresh facility (F5 key) will re-start the demonstration.

In addition to using a mouse to click on the buttons (or similar), keyboard users may use short-cut keys (Alt+N, Alt+P, Alt+H, and Alt+C).

Did following the instructions lead to the expected change?

Peer Review
Miloš	2 pts	Yes, I could easily understand them
Vitaly	2 pts	Yes, I could easily understand them
Marigianna	2 pts	Yes, I could easily understand them
	8 pts

Future improvements

The system lacks any concept of intimating progress (eg "breadcrumbs"):

how much have I completed? (may affect learner satisfaction)
how much is there yet to be done? (fits in with the idea that people today will learn in short bursts and as-and-when time is available. so, an estimate of effort required to complete is necessary to fulfill the principle).

The current control buttons lead to unnecessary code-complexity, and lack a flexibility that may be required when others come to use the system. It would make better sense to over-ride the F1-for-Help convention and put the "Close Help" button on the pop-up Help Panel.

Perhaps the processive controls should be under (course-) author control? (rather than forcibly the same for every card and every module).

The Flash Cards are purely for information presentation/consumption. As a fan of "active learning" I'd prefer that more learner interactivity could be built into a 'card'.

I'd like to explore with trainer-colleagues, the idea (mentioned earlier) of using native HTML as an authoring medium, particularly for/by IT specialist presenting technical material. (greater power and flexibility than a standard LMS offers)

Technical thoughts, eg better use of CSS variables, considering the use of FlexBox or Grid layouts (yet to become widely available in browsers).

Miloš' suggestion of using JavaScript 'keypress' or 'keyup' events instead of the HTML accesskey property would solve the issue of accesskeys 'working' even when the button-control is not available!

The linking of the two CSS Transitions could be better managed by linking the transition-duration on the Flash Card fade-out, with transition-delay on the fade-in; instead of the more complex JavaScript transitionEnd event and callback.

The various fixed-position panels should be better described to take advantage of all available space, whilst guaranteeing that one panel does not intrude into another

Coursera: Responsive Website Basics

Peer-graded Assignment - Build a Responsive Web Page