.quiz-container
  h1 Quiz interface
  .question.box
    p <span>1.</span> What does CSS stand for?
    
  ul.answers
    li.answer.box
      p <span>a</span> Computer Style Sheets
    li.answer.box
      p <span>b</span> Cascading Style Sheets
    li.answer.box
      p <span>c</span> Colorful Style Sheets
    li.answer.box
      p <span>d</span> Creative Style Sheets
      
  button.box Send
    span &#x203A;
View Compiled
@import url('https://fonts.googleapis.com/css?family=Lato');

$red : #cb2127;
$green : #2ecc71;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

body {
  font-family: 'Lato', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  &:before {
    content: "";
    display: block;
    position:fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("http://oi66.tinypic.com/23mvj48.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    
    filter: blur(2px);
    z-index: -1;
  }
  
}

.quiz-container{
  width: 450px;
  color: white;
  font-size: 110%;
  margin: auto;
  
  h1 {
    text-align: center;
    color: $red;
    margin-bottom: 10px;
  }
  
  .box {
    padding: 10px 15px;
  }
  
  .question {
    background-color: $red;
    margin-bottom: 25px;
    font-size: 115%;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    
    &:after {
      content: "";
      position: absolute;
      bottom: -15px;
      left: 35px;
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;

      border-top: 15px solid $red;
    }
    
    span {
      background-color: $red;
      color: white;
      display: block;
      float: left;
      margin-left: -15px;
      margin-top: -10px;
      margin-right: 0px;
      padding: 10px 10px;
      text-align: center;
      text-transform: uppercase;
      width: 40px;
    }
  }
  
  .answers {
    padding-left: 0;
    list-style-type: none;
    
    .answer {
      background-color: #fff;
      color: $red;
      margin-bottom: 10px;
      position: relative;
      
      &:hover, &.active{
        cursor: pointer;
        color: $green;
        
        span:not([class^="checkmark"]) {
          background-color: $green;
        }
      }
      
      &.active span.checkmark {
        background-color: #fff;
        position: absolute;
        top: 8px;
        right: 20px;
        font-size: 120%;
      }
      
        span:not([class^="checkmark"]) {
          background-color: $red;
          color: white;
          display: block;
          float: left;
          margin-left: -15px;
          margin-top: - 10px;
          margin-right: 20px;
          padding: 10px 0;
          text-align: center;
          text-transform: uppercase;
          width: 40px;
       }
    }
    
  }
  
  button {
    background-color: $red;
    color: #fff;
    font-size: 110%;
    border: 0;
    width: 100%;
    position: relative;
    
    &:hover {
      background-color: $green;
      cursor:pointer;
    }
    
    span {
      font-size: 200%;
      position: absolute;
      top: -3px;
      right: 10px;
    }
  }
}

@media (max-width: 450px) {
  .quiz-container {
    width: calc(100% - 30px);
  }
}
View Compiled
$(document).ready(function(){
  var checkmark = "<span class='checkmark'>&#x2713;</span>";
  
  $(".answer").click(function() {
    $(this).siblings(".answer").removeClass("active").children("span").remove();
    $(this).addClass("active").append(checkmark);
  });
  
  $("button").click(function() {
    if($(".active").length) {
      if($(".active").index() === 1) {
        alert("Well done!");
      } else {
        alert("Wrong answer!");
      }
    } else {
      alert("Please select an answer!");
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js