JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <title>Document</title>
    <style>
      .option-card-item input:checked ~ .card {
        border: 2px solid blue;
        transform: translate(-5px, -5px);
      }
      .option-card-container .card {
        margin: auto;
      }
      .option-card-container .card:hover {
        transition: all 300ms;
      }
      .option-card-container .card:hover {
        transform: translate(-5px, -5px);
      }
    </style>
    <script id="option-script">
      let options = [];
    </script>
  </head>
  <body data-options="[]">
    <div class="container">
      <div class="option-card-container d-flex flex-wrap"></div>
      <h2 class="text-center" id="results"></h2>
      <div class="col text-center">
        <button
          type="button"
          class="btn btn-primary sound"
          data-sound="https://www.tonesmp3.com/ringtones/car-lock-sound.mp3"
        >
          Play Sound
        </button>
        <button class="btn btn-primary" onclick="checkAnswer()">submit</button>
        <button
          type="button"
          class="btn btn-info config"
          data-toggle="modal"
          data-target="#form"
        >
          Configure Options
        </button>
        <button type="button" class="btn btn-success config copy">
          Copy Code
        </button>
      </div>
    </div>

    <!-- Modal For the Option -->

    <div
      id="form"
      class="modal fade"
      id="exampleModal"
     ...

JavaScript

let layout = 2;

const optionCard = (
  image,
  title,
  id
) => `<div class="option-card-item" style="flex: ${(
  100 / layout
).toString()}%; max-width: ${(100 / layout).toString()}%;" >
          <input type="checkbox" id="${id}" class="option-select" hidden/>
          <div class="card card-option" style="width: 210px" >
            <img
              class="card-img-top"
              src="${image}"
              alt="Card image"
              style="width: 100%"
            />
            <div
              class="card-body align-items-center d-flex justify-content-center"
            >
              ${title}
            </div>
          </div>
        </div>
`;

function union(setA, setB) {
  let _union = new Set(setA);
  for (let elem of setB) {
    _union.add(elem);
  }
  return _union;
}

$(document).on("change", "#layout-cols", (e) => {
  tempLayout = parseInt(e.target.value);
  if (tempLayout >= 2 && tempLayout <= 5) {
    layout = tempLayout;
    renderFormOptions();
  }
});

const checkAnswer = () => {
  const answerNode = Array.from(document.querySelectorAll(".option-select"));
  const answers = new Set(
    answerNode.filter((option) => option.checked).map((option) => option.id)
  );
  if (options.length === 0) {
    return;
  }
  const correctAnswers = new Set(
    options
      .filter((option) => option.correct)
      .map((option) => option.id.toString())
  );
  const unionSet = union(answers, correctAnswers);
  if (
    unionSet.size === correctAnswers.size &&
    correctAnswers.size === answers.size
  ) {
    $("#results").text("Correct");
  } else {
    $("#results").text("Incorrect");
  }
};

$(document).on("click", ".card-option", (e) => {
  const select = $(e.target)
    .closest(".option-card-item")
    .find(".option-select")[0];
  select.checked = !select.checked;
});

const handleSubmit = (event) => {
  event.preventDefault();
  const renderHtml = options
    .map((option) => optionCard(option.image, option.title, option.id))
   ...