Quizmaster

index.html

<div class="questions gallery js-flickity">
  <div class="question scores gallery-cell show-answer">
    <div>
      <h1><span class="winner">Chris</span> won!</h1>
      <p class="restart">Play again</p>
    </div>
  </div>
</div>

Quizmaster.markdown

Quizmaster

A Pen by chrisarmstrong on CodePen.

License.

script.js

var players = [
  ['Chris', 0, 'E96680'],
  ['Rebecca', 0, '9B5F89'],
  ['John', 0, '625A8E'],
  ['Sarah', 0, '0C5197']
];

var questions = [
  ['How many years did the Hundred Years War last?', '116'],
  ['How many feet are there in a fathom?', 'Six'],
  ['What type of creature is a dugite?', 'Snake'],
  ['Who painted The Water Lily Pool?', 'Claude Monet'],
  ['In the human body what is the hallux?', 'Big toe'],
  ['In which year did Henry VIII become King of England?', '1509'],
  ['Madame de Pompadour was the mistress of which French King?', 'Louis XV'],
];

startQuiz();

function startQuiz() {
  var i = questions.length;
  for (i; i > 0; i--) {
    $('.questions').prepend('<div class="question gallery-cell" id="question' + i + '"><div class="question-text">' + questions[i - 1][0] + '</div><div class="answer-text">' + questions[i - 1][1] + '<form class="players"></form></div></div>');

    for (var p = players.length; p > 0; p--) {
      $('#question' + i + ' form.players').prepend('<input id="question' + i + 'player' + p + '" value="player' + p + '" name="question' + i + '" type="radio" style="background:#' + players[p - 1][2] + '"><label style="background:#' + players[p - 1][2] + '" for="question' + i + 'player' + p + '">' + players[p - 1][0] + '</label><br/>');
    }

  }
}

$('.players input').on("click", function() {
  var currentQuestion = $('.dot.is-selected').index();
  var correctPlayer;
  
  if ($(this).index() == 0) {
    correctPlayer = $(this).index();
  } else {
    correctPlayer = $(this).index() / 3;
  }

  questions[currentQuestion][2] = correctPlayer;
  
  calculateScores();

  var playerColor = $(this).css('background-color');
  $('li.dot.is-selected').css('background-color', playerColor)
  setTimeout(function() {
    $('.gallery').flickity('next')
  }, 500);
})

$('.question').on('click', function() {
  $(this).addClass('show-answer');
})

function calculateScores() {
  for (var p = 0; p < players.length; p++) {
    players[p][1] = 0;
  }

  for (var q = 0; q < questions.length; q++) {
    if (questions[q][2]) {
      var correctPlayer = questions[q][2];
      var score = parseInt(players[correctPlayer][1])
      players[correctPlayer][1] = score+1;
      
      if (q = questions.length) {
        console.log(players);
      }
    }
  }
}

function restart() {
  $('.question.show-answer').removeClass('show-answer');
  $('input:checked').removeAttr('checked');
  $('.gallery').flickity('select', 0);
  $('.dot:not(:last-child)').css("background-color", '#ddd')
}

$('.restart').click(function(){
  restart();
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://flickity.metafizzy.co/flickity.pkgd.min.js"></script>

style.css

body, html {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'FranklinGothic URW';
}

.questions {
  background: #12B7A1;
  position: fixed;
  top: 48px;
  bottom: 0;
  left: 0;
  right: 0;
}

.question {
  width: 100%;
  text-align: center;
  padding: 0;
  overflow-y: scroll;
  transition: all 0.2s;
  position: fixed;
  top: 0;
  bottom: 0;
  
  &.scores {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    
    h1 {
      margin: 0;
      font-family: "ATC Overlook";
    }
  }
  
  &:after {
    content: "Tap to show answer";
    display: block;
    position: fixed;
    bottom: 0px;
    height: 60px;
    width: 100%;
    line-height: 36px;
    color: rgba(255,255,255,0.6);
    padding-top: 12px;
    box-sizing: border-box;
    font-family: "ATC Overlook";
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    transition: all 0.2s;
  }
  
  &.show-answer {
    &:after {
      opacity: 0;
    }
    
    .players {
      opacity: 1;
      transition: opacity 5s;
    }
    
    .answer-text {
      top: 33vh;
      
      &:before {
        opacity: 1;
        transition: all 0.5s;
      }
    }
  }
  
  .question-text, .answer-text {
    font-size: 24px;
    line-height: 36px;
    color: white;
    min-height: 40vh;
    padding-top: 24px;
    padding: 24px;
    margin: 0;
    box-sizing: border-box;
  }
  
  .answer-text {
    background: rgba(0,0,0,0.4);
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8));
    position: fixed;
    width: 100%;
    top: calc(100vh - 108px);
    bottom: 0;
    overflow-y: scroll;
    transition: all 0.4s cubic-bezier(0.565, 1.65, 0.765, 0.88);
    
    &:before {
      opacity: 0;
    }
  }
  
  .question-text:before, .answer-text:before, .players:before {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
    line-height: 36px;
    font-family:"ATC Overlook";
    font-weight: bold;
    color: rgba(0,0,0,0.4);
  }
  
  .question-text:before {
    content:"Question";
  }
  
  .answer-text:before {
    content:"Correct Answer";
    color: rgba(255,255,255,0.6);
  }
  
  form.players {
    opacity: 0;
    
    &:before {
      content:"Who got it correct?";
      color: rgba(255,255,255,0.6);
      margin-top: 48px;
    }
    
    input {
      display:block;
      position: fixed;
      left: -100px;
      
      &:checked + label{
        border: 4px solid white;
        padding-top: 10px;
        padding-bottom: 6px;
      }
    }
    
    label {
      background: #333;
      color: white;
      font-size: 24px;
      line-height: 36px;
      padding: 14px 24px 10px;
      border-radius: 100px;
      margin: 6px;
      display: inline-block;
      cursor: pointer;
    }
    
  }
}

.flickity-prev-next-button {
  display: none;
}

.flickity-page-dots {
  position: fixed;
  top: 0;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}

.flickity-page-dots .dot {
  opacity: 1;
  background: #ddd
}

.flickity-page-dots .dot.is-selected {
  border: 6px double white;
  width: 10px;
  height: 10px;
  margin: 0 6px;
}

.flickity-page-dots .dot:last-child {
  border: none;
  background: none;
  
  &:before {
    content: "*";
    font-family: "ATC Overlook";
    font-size: 34px;
    line-height: 0px;
    position: relative;
    top: 11px;
    color: #ccc;
  }
}

styles

<link href="http://flickity.metafizzy.co/flickity.css" rel="stylesheet" />