<div class="modal fade" id="instructions" tabindex="-1" aria-labelledby="instructionsLabel" aria-hidden="hidden">
  <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" data-bs-target="#choice1Modal" data-bs-toggle="modal" data->CHOICE-1</div>
            </td>
          </tr>
          <tr>
            <td>
              <div id="choice2" class="choiceEven" data-bs-target="#choice2Modal" data-bs-toggle="modal" data->CHOICE-2 </div>
            </td>
          </tr>
          <tr>
            <td>
              <div id="choice3" class="choiceOdd" data-bs-target="#choice3Modal" data-bs-toggle="modal" data->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="choice3Label" 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;
  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 = new bootstrap.Modal(document.getElementById("choices"));

window.addEventListener("contextmenu", (event) => {
  //event.preventDefault();
  instructionsModal.hide();
  choicesModal.show();
});