Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <h1>eCommerce Quiz</h1>
  <!----- Question 1------->
  <div class="question-container content-body show-active" id="question-1">
    <div class="questions">
      <h3>Question 1 out of 3</h3>
      <h4>Which of the following is not a real eCommerce platform?</h4>
    </div>
    <div class="answers">
      <label class="answer">
        <input type="radio" name="ans1" onclick="check()">Shopify</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans1" onclick="check()">WooCommerce</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans1" value="correct" onclick="check()">ShopCommerce</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans1" onclick="check()">BigCommerce</br>
      </label>
    </div>
    <div class="control-1">
      <button class="button next-btn" onclick="setNewActive()" disabled> Next -></button>
    </div>
  </div>

  <!-----Question 2------->
  <div id="question-2" class="question-container content-body">
    <div class="questions">
      <h3>Question 2 out of 3</h3>
      <h4> If Shopify is so good, why are Shopify developers necessary?
      </h4>
    </div>
    <div class="answers">
      <label class="answer">
        <input type="radio" name="ans2" onclick="check()">To save time on things like store setups and migrations.</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans2" onclick="check()">To extend the limited design options and functionalities of themes with custom code</br>
      </label>
      <label>
        <input type="radio" name="ans2" onclick="check()">To provide support with a deep understanding of how the platform works and what its limitations are.</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans2" value="correct" onclick="check()"> All the above.</br>
      </label>
    </div>
    <label class="controls">
      <button class="back-btn" onclick="goback()">
        Back
      </button>
      <button class="button next-btn" onclick="setNewActive()" disabled> Next -></button>
    </label>
  </div>
  <!-----Question 3------->
  <div id="question-3" class="question-container content-body">
    <div class="questions">
      <h3>Question 3 out of 3</h3>
      <h4>Which of the following is true about Shopify developers?
      </h4>
    </div>
    <div class="answers">
      <label class="answer">
        <input type="radio" name="ans3" onclick="check()">They are paid extremely well.</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans3" onclick="check()">There is a high demand for them.</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans3" onclick="check()">They need to know web development, the platform itself, and the liquid template language.</br>
      </label>
      <label class="answer">
        <input type="radio" name="ans3" value="correct" onclick="check()">All the above.</br>
      </label>
    </div>
    <div class="controls">
      <button class="back-btn" onclick="goback()">
        Back
      </button>
      <button class="button submit-btn" onclick="setNewActive()" id="score" disabled> Submit</button>
    </div>
  </div>

  <!------Results---->
  <div class="last-container" id="last-set">
    <div class="results">
      <h2>Results</h2>
      <br>
      <h3>
        Your total answers are displayed below.
      </h3></br>
    </div>
    <div class="button-details">
      <button class="reset-btn" onclick="resetQuiz()"> Restart</button>
    </div>
  </div>
</div>
              
            
!

CSS

              
                * {
  margin: 0;
  padding: 0;
}

h1 {
  padding-bottom: 20px;
  margin-left: 30px;
}
h3 {
  padding: 5px;
  margin-left: 30px;
}

h4 {
  padding: 5px;
  margin-left: 30px;
}
.answers {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px 0;
  font-size: 19px;
}
.answer {
  border-bottom: 3px solid white;
  padding: 10px;
}

.next-btn,
.submit-btn {
  opacity: 50%;
}

.next-btn,
.back-btn,
.submit-btn,
.reset-btn {
  margin-top: 10px;
  background-color: rgb(50, 175, 25);
  color: white;
  padding: 10px 20px;
  font-size: 15px;
  border: none;
}

label {
  display: block;
}
body {
  --hue: var(--hue-natural);
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
  --hue: var(--hue-neutral);
}

.btn {
  --hue: var(--hue-neutral);
  border: 1px solid hsl(var(--hue), 100%, 30%);
  background-color: hsl(var(--hue), 100%, 50%);
}

.container {
  width: 80%;
  height: 50;
  border: 1px solid grey;
  margin: 0 auto;
  box-shadow: 0 0 10px 2px;
}
.btn-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn-active {
  opacity: 100%;
}

.question-container,
.last-container {
  display: none;
}

.selector {
  display: flex;
  margin: 10px;
  border-bottom: 1px solid grey;
}
.tab {
  margin-right: 10px;
  padding: 10px;
}
.tab:hover {
  cursor: pointer;
  background-color: darkgrey;
}
button {
  color: green;
  background-color: grey;
  border: red;
}
.radio {
  cursor: pointer;
}
button:hover {
  cursor: pointer;
}
.content {
  margin: 10px;
}
.content-body {
  display: none;
}
.show-active {
  display: block;
  animation: fade 1s;
}
.tab-active {
  background-color: grey;
}

input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  border: none;
  background: white;
}

input[type="radio"]:before {
  content: "";
  display: block;
  width: 80%;
  height: 80%;
  margin: 10%;
  border-radius: 50%;
}

input[type="radio"]:checked:before {
  background: blue;
}

input[type="radio"]:checked {
  border: 1px solid gray;
}

              
            
!

JS

              
                //variables
var question1 = document.getElementById("question-1");
var question2 = document.getElementById("question-2");
var question3 = document.getElementById("question-3");
const questionElements = document.querySelectorAll('.question-container');
var question4 = document.getElementById("last-set");

var button = document.getElementsByClassName("button");
var submit = 0;

//activate button if radio is checked
function check() {
  var checkedRadios = document.querySelectorAll('input[type="radio"]:checked');
  if (checkedRadios) {
    button[submit].removeAttribute("disabled");
    button[submit].classList.add("btn-active");
  }
}
//function to remove show active class & add next question
function setNewActive() {  questionElements[submit].classList.remove("show-active");
 submit++;
if (submit < 3) { questionElements[submit].classList.add("show-active");
} else {
  question4.classList.add("show-active");
}
  //if (submit === 0) {
    //question1.classList.remove("show-active");
    //question2.classList.add("show-active");
   //submit++;
  //} else if (submit === 1) {
    //question2.classList.remove("show-active");
    //question3.classList.add("show-active");
    //submit++;
  //} else if (submit === 2) {
    //question3.classList.remove("show-active");
    //question4.classList.add("show-active");
    //submit++;
  //}
}
//back button, hides current question and displays previous
function goback() {
  if (submit === 2) {
    question3.classList.remove("show-active");
    question2.classList.add("show-active");
    submit--;
  } else if (submit === 1) {
    question2.classList.remove("show-active");
    question1.classList.add("show-active");
    submit--;
  }
}

//rest quiz, simply reloads the page
function resetQuiz() {
  window.location.reload(true);
}

//this is the counter
var Counter = 0;
function getResults() {
  var choices = document.getElementsByTagName("input");
  for (var i = 0; i < choices.length; i++) {
    if ((choices[i].type = "radio")) {
      if (choices[i].checked && choices[i].value === "correct") {
        Counter += 1;
      }
    }
  }
}

//once submit button is clicked you get your final score message!!
var resultButton = document.getElementById("score");
resultButton.addEventListener("click", function () {
  getResults();
  var resultsPage = document.getElementsByClassName("results")[0];
  var myNewH = document.createElement("h2");
  myNewH.textContent = Counter + " out of 3";
  resultsPage.appendChild(myNewH);
});

              
            
!
999px

Console