Click-To-Reveal Interactive JavaScript

[FeXd]

Create a simple webpage using basic HTML, CSS, and JavaScript, that allows us to have a "click-to-reveal" activity.

Example of existing activities are available in /source directory, specifically:

• case study
• expandable content
• interactive flash card

Adobe Captivate also has some cool examples of "click-to-reveal" activities which could be incorporated: https://www.adobe.com/ca/products/captivate.html

Please refer to #1 and #2 for more examples.

Implementation

• please make your files inside a folder directly in the root of the project, for example click-to-reveal
• inside should only be three files, index.html, script.js, style.css
• we are trying to create these examples as simply as possible, with vanilla JavaScript where possible (no 3rd party libraries)
• it is possible that a 3rd party library may be required, but please check in before you attempt to implement
• feel free to use the /source examples as a base for your implementation, but we do not want to be using jquery

Expectations

• there is no specific deadline for this task
• it is expected that you will check in daily on progress
• you should make a new branch on git and push your branch regularly
• when you are done, or when you want feedback, please open a pull request and let the team know

[Raunaq27]

Wireframe

mockup

[Raunaq27]

I've made some wireframes and mockups before i continued with coding

[FeXd]

@Raunaq27 Demoed to us at standup today, below is some feedback we gave.

• consider using real questions rather than lorem ipsum
• there should be instructions, possibly at the top?
• add visual indicator to question, so user knows which answer is being shown
• change ID from "container" to something less generic, and more specific
• remove onclick properties and replace with an event listener
• make the primary container a <section> with a unique id, something like idt-click-to-reveal

[Raunaq27]

added the changes that was requested and a pull request for it, waiting for the review

[FeXd]

This has been complete thanks to pull request #12