<div class="modal fade" id="instructions" tabindex="-1" aria-labelledby="instructionsLabel" aria-hidden=true>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="instructionsLabel">
          Instructions
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

        </button>
      </div>
      <div class="modal-body">
        Double Right click anywhere on the screen to bring up a menu
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="choices" tabindex="-1" aria-labelledby="choicesLabel" aria-hidden=true>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" id="choicesLabel">
        <h6 class="modal-title">
          Choices
        </h6>
        <button id="choicesClose" type="button" class="Close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="xMark1">X</span>
        </button>
      </div>
      <div class="modal-body" id="choicesBody">
        <table>
          <tr>
            <td>
              <div id="choice1" class="choiceOdd">CHOICE-1</div>
            </td>

          </tr>
          <tr>
            <td>
              <div id="choice2" class="choiceEven">CHOICE-2</div>
            </td>

          </tr>
          <tr>
            <td>
              <div id="choice3" class="choiceOdd">CHOICE-3</div>
            </td>

          </tr>

        </table>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="choice1Modal" tabindex="-1" aria-labelledby="choice1Label" aria-hidden=true>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" id="choice1Label">
        <h6 class="modal-title">
          CHOICE-1
        </h6>
        <button id="choice1Close" type="button" class="Close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="xMark2">X</span>
        </button>
      </div>
      <div class="modal-body" id="choice1Body">
        <div>CHOICE-1 Selected</div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="choice2Modal" tabindex="-1" aria-labelledby="choice2Label" aria-hidden=true>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" id="choice2Label">
        <h6 class="modal-title">
          CHOICE-2
        </h6>
        <button id="choice2Close" type="button" class="Close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="xMark3">X</span>
        </button>
      </div>
      <div class="modal-body" id="choice2Body">
        <div>CHOICE-2 Selected</div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="choice3Modal" tabindex="-1" aria-labelledby="choic3Label" aria-hidden=true>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" id="choice3Label">
        <h6 class="modal-title">
          CHOICE-3
        </h6>
        <button id="choice3Close" type="button" class="Close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" id="xMark4">X</span>
        </button>
      </div>
      <div class="modal-body" id="choice3Body">
        <div>CHOICE-3 Selected</div>
      </div>
    </div>
  </div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

#instructions {
  position: relative;
  height: 600px;
  width: 200px;
}

#choices {
  position: relative;
  height: 700px;
  width: 114px;
}
#choicesLabel {
  padding: 3px 3px 3px 15px;
  height: 40px;
}
#choicesClose {
  width: 20px;
  height: 20px;
  border: none !important;
}
#xMark1 {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
#xMark2 {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
#xMark3 {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
#xMark4 {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}
#xMark5 {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0;
}

#choicesBody {
  padding: 0;
}

td {
  border: solid blue 1px;
}

.modal-backdrop {
  opacity: 05;
}

.choiceOdd {
  width: 108px;
  text-align: center;
}
.choiceEven {
  width: 108px;
  text-align: center;
  background-color: #8a3335;
}

var instructionsModal = new bootstrap.Modal(
  document.getElementById("instructions")
);
instructionsModal.show();
var choicesModal;
var OptionsModal;
var currentEl;
window.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  choicesModal = new bootstrap.Modal(document.getElementById("choices"));
  choicesModal.show();
});
//Listen for click event on page
window.addEventListener(
  "click",
  function (e) {
    //Set the currently clicked element

    currentEl = e.target || e.srcElement;

    switch (currentEl.id) {
      case "choice":
        document
          .getElementById(currentEl.id)
          .addEventListener("click", (event) => {
            OptionsModal = new bootstrap.Modal(
              document.getElementById(currentEl.id + "Modal")
            );
            OptionsModal.show();
          });
        break;
      case "choice1":
        document
          .getElementById(currentEl.id)
          .addEventListener("click", (event) => {
            OptionsModal = new bootstrap.Modal(
              document.getElementById(currentEl.id + "Modal")
            );
            ('OptionsModal = new bootstrap.Modal(document.getElementById("choice2Modal"))');
            OptionsModal.show();
          });
        break;
      case "choice2":
        document
          .getElementById(currentEl.id)
          .addEventListener("click", (event) => {
            OptionsModal = new bootstrap.Modal(
              document.getElementById(currentEl.id + "Modal")
            );
            OptionsModal.show();
          });
        break;
      case "choice3":
        document
          .getElementById(currentEl.id)
          .addEventListener("click", (event) => {
            OptionsModal = new bootstrap.Modal(
              document.getElementById(currentEl.id + "Modal")
            );
            OptionsModal.show();
          });
        break;

      case "choice4":
        //Code block for id = choice4
        document
          .getElementById(currentEl.id)
          .addEventListener("click", (event) => {
            OptionsModal = new bootstrap.Modal(
              document.getElementById(currentEl.id + "Modal")
            );
            OptionsModal.show();
          });
        break;
    }
  },
  false
);