Bootstrap 4

by Dug Sohn

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css">
<div class="question">
  <h1 class="text-center">
    Trivia Banner Question
  </h1>
  <div class="container">
    <div class="trivia-banner">
      <div class="triva-container container-fluid ">
        <div class="row">
          <div class="col">
            <div class="trivia-question">
              <h4>
                Powering Affordable Care came from collecting Qualitative and quantitative marketing research to identify messaging that resonates most with all our audiences both in terms of:

              </h4>
            </div>
          </div>
        </div>
        <div class="trivia-answer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-2 p-0">
                <div class="badge badge-primary">
                  A</div>
              </div>
              <div class="col-10 pl-0">
                Attractiveness and credibility </div>
            </div>
            <div class="row">
              <div class="col-2 p-0">
                <div class="badge badge-primary">
                  B</div>
              </div>
              <div class="col-10 pl-0">
                Testing and health </div>
            </div>
            <div class="row">
              <div class="col-2 p-0">
                <div class="badge badge-primary">
                  C</div>
              </div>
              <div class="col-10 pl-0">
                Location and distance </div>
            </div>
            <div class="row">
              <div class="col-2 p-0">
                <div class="badge badge-primary">
                  D</div>
              </div>
              <div class="col-10  pl-0">
                All of the above </div>
            </div>
            <div class="row">
              <div...

SCSS

.trivia-banner {
  background: green url("https://dugsohn.com/dugsohn/duggur/Quest_2022_Lobby_Screen_500.png") no-repeat;
  background-size: 100%;
  width: 300px;
  height: 705px;
  margin: 0 auto;
  position: relative;


.trivia-question h4 {
  margin-top:225px;
  font-family: "AkkuratPro", Helvetica, sans-serif;
  font-weight: bold;
  color: white;
  padding:  20px 0;
  text-align: left;
  font-size:18px;
}

.trivia-footer {
  position: absolute;
  width: 100%;
  bottom: 5px;
  left: 0;
}

.trivia-answer .row {
  padding: 2px 1px;
  color: white;
  margin-left:-10px;
}




 .trivia-answer .badge {
     border: 2px solid #fff;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    line-height: 17px;
    font-size: 17px;
}

.trivia-answer .badge:before {
    content: "";
    position: absolute;
    display: block;
    left: -22px;
    top: 13px;
    border: 1px solid white;
    width: 22px;
    height: 1px;

}
.col-10.pl-0 {
    line-height: 16px;
    padding-top:4px
}

ol {
  list-style: upper-alpha;
}
.alert{
  width: 100%;
  padding: 5px 10px;
}
}
.question .trivia-answer .row:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, .4)
}

JavaScript

$('.question .trivia-answer .row > div').click(function() {
  var $thisRow = $(this);
    $('.question .badge').removeClass('badge-primary');
    $('.btn-block').prop('disabled','');
  $thisRow.closest('.row').find('.badge').addClass('badge-primary');
  
});

$('.submit').click(function() {
     $('.question').hide();
     $('.answer').show();
});

$('.next').click(function() {
     $('.question').show();
     $('.answer').hide();
});