Created
May 17, 2013 06:20
-
-
Save pipwerks/5597275 to your computer and use it in GitHub Desktop.
Updated "ungraded quiz with feedback" example. Uses jQuery. Warning: this example is NOT keyboard accessible, and will require a mouse or touch interaction.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Sample ungraded question with feedback</title> | |
| <style> | |
| /* basic page styling */ | |
| body { font-family: sans-serif; color: #444; font-size: small; margin: 0px; padding: 2em; background: #eee; } | |
| h1 { font-size: xx-large; font-weight: normal; color: #777; } | |
| h2 { font-size: x-large; font-weight: normal; } | |
| /* stying the questions and answers */ | |
| .question { margin: 0; padding: 0; } | |
| .question dt { | |
| margin: 0 0 .5em 2em; | |
| padding: .75em .75em .75em 2em; | |
| background: #FFF; | |
| border: 1px solid #EFEFEF; | |
| border-bottom: 1px solid #DDD; | |
| border-left: 1px solid #DDD; | |
| cursor: pointer; | |
| border-radius: 6px; | |
| } | |
| .question dt.active { | |
| background: #AAA; | |
| color: #FFF; | |
| font-weight: bold; | |
| border: 1px solid #EFEFEF; | |
| border-bottom: 1px solid #CCC; | |
| border-left: 1px solid #CCC; | |
| } | |
| .question dt:before { | |
| content: ' '; | |
| position: absolute; | |
| height: 0; | |
| width: 0; | |
| border: .5em solid transparent; | |
| border-left-color: #6FA552; | |
| margin-left: -1em; | |
| float: left; | |
| } | |
| .question dt:hover { | |
| border: 1px solid #CCC; | |
| border-bottom: 1px solid #BBB; | |
| border-left: 1px solid #BBB; | |
| background: #BCD2FD; | |
| } | |
| .question dd { | |
| padding: .75em; | |
| padding-left: 3em; | |
| margin: 0 0 .5em 2em; | |
| background: #FFF0FF; | |
| border: 1px solid rgba(0,0,0,.15); | |
| border-radius: 6px; | |
| display: none; | |
| } | |
| .question dd:before { | |
| content: "\2716"; /* a cross or X sign */ | |
| font-size: 1.4em; | |
| color: #f36; | |
| text-shadow: 0px 2px 2px rgba(0,0,0,.25); | |
| margin: -.15em 0 0 -1.5em; | |
| padding: 0; | |
| float: left; | |
| } | |
| .question dd.correct { | |
| background: #E6FFDD; | |
| border: 1px solid rgba(0,0,0,.3); | |
| } | |
| .question dd.correct:before { | |
| content: "\2714"; /* a checkmark */ | |
| font-size: 1.2em; | |
| color: #6FA552; | |
| } | |
| .question dd.active { display: block; } | |
| /* Gratuitous text bubbles */ | |
| h2 { position: relative; padding: .5em 1em; background: #FFFFFF; border: rgba(0,0,0,.2) solid 3px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } | |
| h2:after { content: ""; position: absolute; bottom: -24px; left: 69px; border-style: solid; border-width: 24px 24px 0; border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; } | |
| h2:before { content: ""; position: absolute; bottom: -28px; left: 67px; border-style: solid; border-width: 26px 26px 0; border-color: rgba(0,0,0,.2) transparent; display: block; width: 0; z-index: 0; } | |
| h2 { margin-top: 3em; } | |
| /* boring stuff */ | |
| p.pipwerks { font-size: x-small; margin-top: 5em; padding: .5em; background: #fff; border: 1px solid #ddd; text-align: center; color: #999; } | |
| p.creativeCommons { font-size: x-small; color: #ccc; text-align: center; } | |
| </style> | |
| <!-- import jQuery --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
| <script> | |
| /* | |
| Example code by Philip Hutchison, March 2013 (http://pipwerks.com). | |
| On page load, we will attach an event listener to all dl.question nodes. | |
| If the clicked item is a DT that belongs to one of the dl.question nodes, | |
| we will apply CSS classes to selectively show/hide answers. | |
| */ | |
| $(function(){ | |
| $("dl.question").click(function(event){ | |
| if(event.target.nodeName === "DT"){ | |
| $(".active").removeClass("active"); | |
| $(event.target).parent("dl").addClass("active"); | |
| $(event.target).next("dd").addClass("active"); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Sample ungraded question with feedback.</h1> | |
| <h2>Who was the greatest Bond?</h2> | |
| <dl class="question"> | |
| <dt>Sean Connery</dt> | |
| <dd class="correct">Great choice! It's hard not to choose the man who defined Bond. If only he hadn't made <em>Never Say Never Again</em>...</dd> | |
| <dt>George Lazenby</dt> | |
| <dd>People give Georgie a bad rap; <em>On Her Majesty's Secret Service</em> is actually one of the better Bond films. However, one film does not a legend make. <strong>Try again.</strong></dd> | |
| <dt>Roger Moore</dt> | |
| <dd>Suave and charming, Roger Moore added a greater sense of sophistication to Bond. However, he also starred in some of the campiest Bond films ever made, with what many of his critics called an overbearing focus on cheap laughs. <em>For Your Eyes Only</em>, a valiant attempt at returning Bond to more serious fare, makes a great argument for his status as the greatest Bond, but we simply can't forgive Moore for <em>Moonraker</em>.<strong>Try again.</strong></dd> | |
| <dt>Timothy Dalton</dt> | |
| <dd>The biggest knock against Dalton's films are the lack of sex appeal. However, most people forget these films were made at the height of the AIDS scare, when freewheeling sexcapades were highly discouraged in Hollywood films. Regardless, his films were entertaining and Dalton brought a renewed sense of gravitas to Bond after Roger Moore's comic antics. Alas, it isn't enough; you can't give Dalton the title of Greatest Bond on the basis of two mediocre films! <strong>Try again.</strong></dd> | |
| <dt>Pierce Brosnan</dt> | |
| <dd>Brosnan is the Bond box-office king, with the highest-grossing Bond films ever made. But is it enough to sway the vote for Greatest Bond in his favor? Probably not. His films were highly entertaining and action-packed, and he re-invigorated the role of Bond with panache, but Brosnan's films are not regarded as classics, and are often regarded as not much better than other modern-day action films. <strong>Try again.</strong></dd> | |
| <dt>Daniel Craig</dt> | |
| <dd><em>Casino Royale</em> was much, much better than most people anticipated, and Craig seems to bring back the sense of brutality and danger that Connery was able to silently evoke. With time, he could be a vey good Bond. But the Greatest Bond? Nope. <strong>Try again.</strong></dd> | |
| </dl> | |
| <h2>Who was the greatest Bond villain?</h2> | |
| <dl class="question"> | |
| <dt>Le Chiffre</dt> | |
| <dd>Casino Royale. <strong>Try again.</strong></dd> | |
| <dt>Mr. Big</dt> | |
| <dd>Live and Let Die. <strong>Try again.</strong></dd> | |
| <dt>Hugo Drax</dt> | |
| <dd>Moonraker. <strong>Try again.</strong></dd> | |
| <dt>Auric Goldfinger</dt> | |
| <dd class="correct">Goldfinger. The man with the Midas touch… a <em>spider's</em> touch.</dd> | |
| <dt>Ernst Blofeld</dt> | |
| <dd>Pretty kitty. <strong>Try again.</strong></dd> | |
| <dt>Dr. No</dt> | |
| <dd>Dr. No. <strong>Try again.</strong></dd> | |
| </dl> | |
| <p class="pipwerks">This example created by Philip Hutchison, May 2013. <a href="http://pipwerks.com/">http://pipwerks.com/</a></p> | |
| <p class="creativeCommons">This work is licensed under the Creative Commons Attribution 3.0 Unported License.<br /> | |
| To view a copy of this license, visit http://creativecommons.org/licenses/by/3.0/ or send a letter to <br /> | |
| Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment