JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div class="container">
  <header>
    stuff here
  </header>
  <div class="content">
    <div class="question">
      This is the question for this slide.
      <br>
      <br> Select the correct answers.
    </div>
    <br>
    <br>
    <div class="answer-box">
      <select class="answers" name="select" multiple>
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
        <option value="value3">Value 3</option>
      </select>
      
      <label><input type="checkbox" name="values" value="value1" /> Value 1</label>
      <label><input type="checkbox" name="values" value="value2" /> Value 2</label>
      <label><input type="checkbox" name="values" value="value3" /> Value 3</label>
    </div>
    <br>
    <button class="submit">Submit</button>
  </div>
</div>

SCSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,body {
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  min-height: 100%;
  border: 1px solid #ff0000;
}


$topbar-height: 65px;

header {
  width: 100%;
  height: $topbar-height;
  line-height: $topbar-height;
  background: red;
  color: white;
}

.content {
  padding: 15px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.question {
  font-style: italic;
  font-size: 1.3em;
  color: blue;
}

.answer-box {
  select {
    min-width: 100px;
    min-height: 40px;
    display: none;
  
    @media (max-width: 480px) {
      display: inline-block;
    }
  }
}


label {
  display: block;
}

JavaScript

console.log("-----------------------");

$(".submit").on("click", function() {
	console.log($(".answers option:selected"));
  
  if($(".answers option:selected").size() == 0) {
  	alert("stuff");
  }
  else if(checkAnswers($(".answers option:selected"), ["value1", "value2"]) && $(".answers option:selected").size() == ["value1", "value2"].length) {
  	//when the lengths match and the answers match
    alert("is valid");
  }
});


// for switching between mobile and desktop
$("input[type='checkbox']").on("click", function() {
	var selectedVal = $(this).val();
	if($(this).is(":checked")) {
  	$("select option[value='" + selectedVal + "']").prop("selected", "selected");
  }
  else {
  	//$("select option[value='" + selectedVal + "']").attr("selected",false);
    $("select option[value='" + selectedVal + "']:selected").prop("selected", false);
    
  }
  
  console.log($("select option[value='" + selectedVal + "']").prop("selected"));
});

function checkAnswers(divs, correctVals) {
	
  var values = [];
	divs.each(function(index) {
  	values.push($(this).val().toString());
  });
  
  console.log(values);
  
  var isSuperset = values.every(function (val) { return correctVals.indexOf(val) >= 0; });
  
  console.log(isSuperset);
  
	return isSuperset;
}