cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <h1>The Toasty <span class="subject"></span> Quiz!</h1>
  <h2>
    How many <span class="detailed-subject"></span>
    can you name in <span class="time-limit"></span>?
  </h2>
  <div class="side">
    <div class="toast neutral-toast"></div>
  </div>
  <div class="main">
    <button type="button" class="start">Ready? Click here to start!</button>
    <div class="started">
      <input type="text" class="input">
      <div class="status">
        <div class="status-timer">
          Time remaining: <span class="time-remaining"></span>
        </div>
        <div class="status-current-score">
          Current score: <span class="score"></span>
          out of <span class="total"></span>
        </div>
        <div class="status-final-results">
          <span class="end-greeting"></span>
          You got <span class="score"></span>
          out of <span class="total"></span>.
          That's <span class="percent"></span>%!
        </div>
        <div class="status-toggle-answers">
          (<a href="#" class="toggle">see what you missed</a>)
        </div>
      </div>
      <ul class="answers scored-answers"></ul>
      <ul class="answers missed-answers"></ul>
      <div class="footnote">
        Thanks for playing!
        <a href="#" class="reset">Play again</a>?
      </div>
    </div>
  </div>
</div>

            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Shanti|Salsa);

* {
  box-sizing: border-box;
}

html {
  background: radial-gradient(#b4c5cf, #447891);
  background-attachment: fixed;
}

body {
  margin: 20px;
  font: 24px/1 'Salsa', sans-serif;
  color: #fff;
  text-shadow: rgba(0, 0, 0, .3) 1px 1px 1px;
}

a {
  color: #ffefb2;
  text-decoration: none;
}

h1, h2 {
  margin: 0 0 0 140px;
  font-weight: normal;
  text-align: center;
}

h1 {
  margin-bottom: 10px;
  font-size: 60px;
  color: #ffefb2;
}

h2 {
  margin-bottom: 20px;
  font-size: inherit;
}

.container {
  margin: 0 auto;
  min-width: 800px;
  max-width: 1200px;
}

.side {
  float: left;
  width: 120px;
  margin-right: 20px;
}

.toast {
  margin-top: -20px;
  width: 120px;
  height: 134px;
  transform: translateY(0);
  animation: toast 5s infinite;
}
@keyframes toast {
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0); }
}

.neutral-toast {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/toasty-quiz-neutral.png);
}

.happy-toast {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/toasty-quiz-happy.png);
}

.sad-toast {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/toasty-quiz-sad.png);
}

.main {
  margin-left: 140px;
}

.start {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  border: solid 6px rgba(255, 255, 255, .8);
  border-radius: 16px;
  font: 40px 'Shanti', sans-serif;
  color: #fff;
  background: #447891 linear-gradient(rgba(255, 255, 255, .3), transparent);
  background-size: auto 180%;
  background-position: 0 80%;
  box-shadow: 0 0 6px rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: background-position .2s;
}
.start:hover {
  background-position: 0 0;  
}
.start:focus {
  outline: none;
}

.started {
  display: none;
}

.input {
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  border: solid 6px rgba(255, 255, 255, .8);
  border-radius: 16px;
  font: 40px 'Shanti', sans-serif;
  color: #6b4c36;
  background-color: rgba(255, 255, 255, .3);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2);
}
.input:focus {
  outline: none;
}
.input:disabled {
  opacity: .3;
  transition: opacity .5s;
}

.status {
  padding: 10px 0;
  margin-bottom: 10px;
}
.status::after {
  content: '';
  display: block;
  clear: both;
}

.status-timer {
  float: left;
}

.status-current-score {
  float: right;
}

.status-final-results {
  display: none;
  float: left;
}

.status-toggle-answers {
  display: none;
  float: right;
}

.time-remaining {
  color: #ffefb2;
}

.answers {
  margin: 0;
  padding: 20px 0 10px;
  border-top: dotted 2px rgba(255, 255, 255, .8);
}
.answers::after {
  content: '';
  display: block;
  clear: both;
}

.answers li {
  display: block;
  float: left;
  margin: 0 10px 10px 0;
  padding: 10px;
  border: solid 1px rgba(255, 255, 255, .8);
  font-family: 'Shanti', sans-serif;
  text-shadow: none;
  background-color: rgba(255, 255, 255, .3);
  opacity: 0;
  transform: translateY(-40px);
  animation: answer .5s ease-out forwards;
}
@keyframes answer {
	100% { opacity: 1; transform: translateY(0); }
}
.answers li:last-child {
  margin-right: 0;
}

.scored-answers {
  color: #6b4c36;
}

.missed-answers {
  display: none;
  color: #fff;
}

.footnote {
  display: none;
  padding-top: 20px;
  border-top: dotted 2px rgba(255, 255, 255, .8);
  text-align: right;
}

            
          
!
            
              /*

The Toasty Quiz, by Will boyd
(bug me on Twitter @lonekorean)

I created The Toasty Quiz to be SUPER-FORKABLE, so you can make your own quizzes out of it. Just follow these steps:

1. Click the Fork button at the top left.
2. Change the 4 QUIZ_ variables below, as prompted.
3. Click the Info button at the top left and change the details.

Feel free to leave a comment on the original (https://codepen.io/lonekorean/details/bfAjD) with a link to your quiz.

Now for a bunch of blank lines to push the answers out of view...

*/











































/*

Fill in these 4 constants to customize your quiz.

*/

// shown in the header text
var QUIZ_SUBJECT = 'CSS';

// shown in the sub-header text
var QUIZ_DETAILED_SUBJECT = 'CSS3 properties';

// the time limit, in minutes
var QUIZ_TIME_LIMIT = 5;

// array of all the correct answers
var QUIZ_ANSWERS = ['align-content', 'align-items', 'align-self', 'alignment-adjust', 'alignment-baseline', 'all', 'anchor-point', 'animation', 'animation-delay', 'animation-direction', 'animation-duration', 'animation-fill-mode', 'animation-iteration-count', 'animation-name', 'animation-play-state', 'animation-timing-function', 'appearance', 'azimuth', 'backface-visibility', 'background', 'background-attachment', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size', 'baseline-shift', 'binding', 'bleed', 'bookmark-label', 'bookmark-level', 'bookmark-state', 'bookmark-target', 'border', 'border-bottom', 'border-bottom-color', 'border-bottom-left-radius', 'border-bottom-right-radius', 'border-bottom-style', 'border-bottom-width', 'border-collapse', 'border-color', 'border-image', 'border-image-outset', 'border-image-repeat', 'border-image-slice', 'border-image-source', 'border-image-width', 'border-left', 'border-left-color', 'border-left-style', 'border-left-width', 'border-radius', 'border-right', 'border-right-color', 'border-right-style', 'border-right-width', 'border-spacing', 'border-style', 'border-top', 'border-top-color', 'border-top-left-radius', 'border-top-right-radius', 'border-top-style', 'border-top-width', 'border-width', 'bottom', 'box-decoration-break', 'box-shadow', 'box-sizing', 'break-after', 'break-before', 'break-inside', 'caption-side', 'chains', 'clear', 'clip', 'clip-path', 'clip-rule', 'color', 'color-interpolation-filters', 'color-profile', 'column-count', 'column-fill', 'column-gap', 'column-rule', 'column-rule-color', 'column-rule-style', 'column-rule-width', 'column-span', 'column-width', 'columns', 'contain', 'content', 'counter-increment', 'counter-reset', 'crop', 'cue', 'cue-after', 'cue-before', 'cursor', 'direction', 'display', 'dominant-baseline', 'drop-initial-after-adjust', 'drop-initial-after-align', 'drop-initial-before-adjust', 'drop-initial-before-align', 'drop-initial-size', 'drop-initial-value', 'elevation', 'empty-cells', 'filter', 'flex', 'flex-basis', 'flex-direction', 'flex-flow', 'flex-grow', 'flex-shrink', 'flex-wrap', 'float', 'float-offset', 'flood-color', 'flood-opacity', 'flow-from', 'flow-into', 'font', 'font-family', 'font-feature-settings', 'font-kerning', 'font-language-override', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-synthesis', 'font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position', 'font-weight', 'grid', 'grid-area', 'grid-auto-columns', 'grid-auto-flow', 'grid-auto-position', 'grid-auto-rows', 'grid-column', 'grid-column-end', 'grid-column-start', 'grid-row', 'grid-row-end', 'grid-row-start', 'grid-template', 'grid-template-areas', 'grid-template-columns', 'grid-template-rows', 'hanging-punctuation', 'height', 'hyphens', 'icon', 'image-orientation', 'image-resolution', 'ime-mode', 'inline-box-align', 'justify-content', 'justify-items', 'justify-self', 'left', 'letter-spacing', 'lighting-color', 'line-break', 'line-height', 'line-stacking', 'line-stacking-ruby', 'line-stacking-shift', 'line-stacking-strategy', 'list-style', 'list-style-image', 'list-style-position', 'list-style-type', 'margin', 'margin-bottom', 'margin-left', 'margin-right', 'margin-top', 'marks', 'mask', 'mask-box', 'mask-box-outset', 'mask-box-repeat', 'mask-box-slice', 'mask-box-source', 'mask-box-width', 'mask-clip', 'mask-image', 'mask-origin', 'mask-position', 'mask-repeat', 'mask-size', 'mask-source-type', 'mask-type', 'max-height', 'max-lines', 'max-width', 'min-height', 'min-width', 'move-to', 'nav-down', 'nav-index', 'nav-left', 'nav-right', 'nav-up', 'object-fit', 'object-position', 'opacity', 'order', 'orphans', 'outline', 'outline-color', 'outline-offset', 'outline-style', 'outline-width', 'overflow', 'overflow-wrap', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'page', 'page-break-after', 'page-break-before', 'page-break-inside', 'page-policy', 'pause', 'pause-after', 'pause-before', 'perspective', 'perspective-origin', 'pitch', 'pitch-range', 'play-during', 'position', 'presentation-level', 'quotes', 'region-fragment', 'rendering-intent', 'resize', 'rest', 'rest-after', 'rest-before', 'richness', 'right', 'rotation', 'rotation-point', 'ruby-align', 'ruby-overhang', 'ruby-position', 'ruby-span', 'shape-image-threshold', 'shape-outside', 'shape-margin', 'size', 'speak', 'speak-as', 'speak-header', 'speak-numeral', 'speak-punctuation', 'speech-rate', 'stress', 'string-set', 'tab-size', 'table-layout', 'target', 'target-name', 'target-new', 'target-position', 'text-align', 'text-align-last', 'text-combine-horizontal', 'text-decoration', 'text-decoration-color', 'text-decoration-line', 'text-decoration-skip', 'text-decoration-style', 'text-emphasis', 'text-emphasis-color', 'text-emphasis-position', 'text-emphasis-style', 'text-height', 'text-indent', 'text-justify', 'text-orientation', 'text-outline', 'text-overflow', 'text-shadow', 'text-space-collapse', 'text-transform', 'text-underline-position', 'text-wrap', 'top', 'transform', 'transform-origin', 'transform-style', 'transition', 'transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function', 'unicode-bidi', 'vertical-align', 'visibility', 'voice-balance', 'voice-duration', 'voice-family', 'voice-pitch', 'voice-range', 'voice-rate', 'voice-stress', 'voice-volume', 'volume', 'white-space', 'widows', 'width', 'word-break', 'word-spacing', 'word-wrap', 'wrap-flow', 'wrap-through', 'writing-mode', 'z-index'];

/*

You don't need to mess with anything past this point. Unless you want to, of course. :)

*/

var HAPPY_TIME = 1000; // how long to stay happy, in ms
var NEUTRAL_TIME = 20000; // how long to stay neutral, in ms

// timers
var toastMoodTimeout;
var timeInterval;

// other global variables
var answers;
var timeRemaining;
var score;

$(function () {
  // fill in the blanks
  $('.subject').text(QUIZ_SUBJECT);
  $('.detailed-subject').text(QUIZ_DETAILED_SUBJECT);
  $('.time-limit').text(QUIZ_TIME_LIMIT + ' ' + (QUIZ_TIME_LIMIT === 1 ? 'minute' : 'minutes'));
  
  // bind events
  $('.start').on('click', startQuiz);
  $('.input').on('input', checkInput);
  $('.toggle').on('click', toggleAnswers);
  $('.reset').on('click', reset);
  
  // preload other toast moods
  preloadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/toasty-quiz-happy.png');
  preloadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/toasty-quiz-neutral.png');  
});

function preloadImage(src) {
  var img = new Image();
  img.src = src;
}

function startQuiz() {
  // init some variables
  initAnswers();
  timeRemaining = Math.round(QUIZ_TIME_LIMIT * 60);
  score = 0;
  
  // prepare UI
  $('.time-remaining').text(getTimeString());
  $('.score').text(score);
  $('.total').text(QUIZ_ANSWERS.length);
  $('.start').hide();
  $('.started').show();
  $('.input').focus();

  // start the clock
  timeInterval = setInterval(reduceTime, 1000);
  setToastMood('neutral');
}

function initAnswers() {
  answers = {};
  QUIZ_ANSWERS.forEach(function(item) {
    var answer = item.trim().toLowerCase()
    answers[answer] = false;
  });
}

function setToastMood(mood, isPermanent) {
  $('.toast')
    .removeClass('neutral-toast happy-toast sad-toast')
    .addClass(mood + '-toast');

  clearTimeout(toastMoodTimeout);
  if (!isPermanent) {
    if (mood === 'happy') {
      // happy toast becomes neutral toast
      toastMoodTimeout = setTimeout(setToastMood.bind(undefined, 'neutral'), HAPPY_TIME);
    } else if (mood === 'neutral') {
      // neutral toast becomes sad toast
      toastMoodTimeout = setTimeout(setToastMood.bind(undefined, 'sad'), NEUTRAL_TIME);
    }
  }
}

function reduceTime() {
  timeRemaining--;
  if (timeRemaining === 0) {
    endQuiz();
  } else {
    $('.time-remaining').text(getTimeString());
  }
}

function checkInput(event) {
  var input = event.currentTarget.value.trim().toLowerCase();
  if (answers.hasOwnProperty(input) && !answers[input]) {
    // give credit
    answers[input] = true;
    score++;
    $('.score').text(score);
    $('.scored-answers').prepend(createAnswerItem(input));
    setToastMood('happy');
    
    // clear input
    $('.input').val('');
    
    // check if user beat the quiz
    if (score === QUIZ_ANSWERS.length) {
      endQuiz();
    }
  }
}

function endQuiz() {
  // freeze
  clearTimeout(timeInterval);
  $('.input').prop('disabled', true);
  
  // calculate percentage
  var percent = Math.round(score / QUIZ_ANSWERS.length * 100);
  $('.percent').text(percent);

  // change status stuff
  $('.status-timer, .status-current-score').hide();
  $('.status-final-results').show();
  $('.footnote').show();

  // score-dependent stuff
  if (score === QUIZ_ANSWERS.length) {
    // happy
    $('.end-greeting').text('Perfect, with ' + getTimeString() + ' remaining!');
    setToastMood('happy', true);
  } else if (score > 0) {
    // neutral
    $('.end-greeting').text('Time\'s up!');
    setToastMood('neutral', true);
    renderMissedAnswers();
    $('.status-toggle-answers').show();
  } else {
    // sad
    $('.end-greeting').text('Nothing...');
    setToastMood('sad', true);
    renderMissedAnswers();
    $('.scored-answers').hide();
    $('.missed-answers').show();
  }
}

function renderMissedAnswers() {
  QUIZ_ANSWERS.forEach(function(item) {
    var answer = item.trim().toLowerCase()
    if (!answers[answer]) {
      $('.missed-answers').append(createAnswerItem(answer));
    }
  });
}

function toggleAnswers(event) {
  event.preventDefault();
  
  if ($('.scored-answers').is(':visible')) {
    // switch to missed answers
    $('.toggle').text('see what you got');
    $('.scored-answers').hide();
    $('.missed-answers').show();
  } else {
    // switch to scored answers
    $('.toggle').text('see what you missed');
    $('.missed-answers').hide();
    $('.scored-answers').show();
  }
}

function createAnswerItem(answer) {
  return $('<li>', { text: answer });
}

function getTimeString() {
  if (timeRemaining <= 0) {
    return '0:00';
  } else {
    var minutes = Math.floor(timeRemaining / 60);
    var seconds = timeRemaining % 60;
    if (seconds < 10) {
      seconds = '0' + seconds;
    }
    return minutes + ':' + seconds;
  }
}

function reset() {
  // put everything back the way it was
  $('.started, .status-final-results, .status-toggle-answers, .missed-answers, .footnote').hide();
  $('.start, .status-timer, .status-current-score, .scored-answers').show();
  $('.input').prop('disabled', false).val('');
  $('.answers').empty();
  $('.toggle').text('see what you missed');
  setToastMood('neutral', true);
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console