{% extends "global/Page.html" %}

{% block title %}
Task 5 of 12 <br>
Sudoku{% endblock %}
{% block content %}



    <style>
      table {
      margin:1em auto;
      }
      td {
      height:70px;
      width:70px;
      border:1px solid;
      text-align:center;
      }
      td:first-child {
      border-left:solid;
      }
      td:nth-child(3n) {
      border-right:solid ;
      }
      tr:first-child {
      border-top:solid;
      }
      tr:nth-child(3n) td {
      border-bottom:solid ;
      }
    </style>

    <p>
        Please solve the following puzzle as quickly and as accurately as possible. You must complete the puzzle
        before continuing to the next task.
    </p>

    <button type="button" class="btn btn-primary" onclick="myFunction()">Show/Hide Sudoku Instructions</button><br><br>


<div id="myDIV" style="display: none">
   <p>
    For this task, you will be presented with a Sudoku puzzle .
        If you are not familiar with how to solve a Sudoku puzzle, please read the below instructions carefully:<br><br>

        <i>How to solve a Sudoku puzzle: </i><br>
        Sudoku is played on a grid of 9 x 9 spaces.
        Within the rows and columns are 9 “squares” (made up of 3 x 3 spaces).
        Each row, column and square (9 spaces each) needs to be filled out with the numbers 1-9,
        without repeating any numbers within the row, column or square.

        <br><br>
        <i>Detailed demonstrations</i><br><br>
        <strong>Rule #1: Each row must contain the numbers 1-9 exactly once each</strong><br>
        <img src="{{ static 'global/HLMM/Sudoku1.jpg' }}"/><br><br>

        <strong>Rule #2: Each column must contain the numbers 1-9 exactly once each</strong><br>
        <img src="{{ static 'global/HLMM/Sudoku2.jpg' }}"/><br><br>

        <strong>Rule #3: Each 3×3 box must contain the numbers 1-9 exactly once each</strong><br>
        <img src="{{ static 'global/HLMM/Sudoku3.jpg' }}"/><br><br>

        <hr><br>
        For Example:<br><br>

        Below is the unsolved puzzle:<br>
        <img src="{{ static 'global/HLMM/Sudoku4.jpg' }}"/><br><br>

        Below is the solved puzzle:<br>
        <img src="{{ static 'global/HLMM/Sudoku5.jpg' }}"/><br><br>

        <hr><br><br>
</div>

    <table>
  <tr>
    <td> 6 </td>
    <td> 4 </td>
    <td> 8 </td>
    <td> 7 </td>
    <td> 1 </td>
    <td> 3 </td>
    <td> 9 </td>
    <td> {{ formfield 'Sudoku3' }} </td>
    <td> 2 </td>
  </tr>
  <tr>
    <td> 5 </td>
    <td> 7 </td>
    <td> 2 </td>
    <td> 9 </td>
    <td> 4 </td>
    <td> 8 </td>
    <td> 3 </td>
    <td> 1 </td>
    <td> 6 </td>
  </tr>
  <tr>
    <td> 1 </td>
    <td> {{ formfield 'Sudoku1' }} </td>
    <td> {{ formfield 'Sudoku2' }} </td>
    <td> 2 </td>
    <td> 5 </td>
    <td> 6 </td>
    <td> 7 </td>
    <td> 8 </td>
    <td> 4 </td>
  </tr>
  <tr>
    <td> 2 </td>
    <td> 6 </td>
    <td> 7 </td>
    <td> 8 </td>
    <td> 9 </td>
    <td> 1 </td>
    <td> 5 </td>
    <td> 4 </td>
    <td> 3 </td>
  </tr>
  <tr>
    <td> 9 </td>
    <td> 3 </td>
    <td> 4 </td>
    <td> 5 </td>
    <td> {{ formfield 'Sudoku4' }} </td>
    <td> {{ formfield 'Sudoku5' }} </td>
    <td> 1 </td>
    <td> 6 </td>
    <td> 8 </td>
  </tr>
  <tr>
    <td> 8 </td>
    <td> 1 </td>
    <td> 5 </td>
    <td> 6 </td>
    <td> 3 </td>
    <td> 4 </td>
    <td> 2 </td>
    <td> 7 </td>
    <td> 9 </td>
  </tr>
  <tr>
    <td> 7 </td>
    <td> 5 </td>
    <td> {{ formfield 'Sudoku7' }} </td>
    <td> 3 </td>
    <td> 8 </td>
    <td> 2 </td>
    <td> {{ formfield 'Sudoku8' }} </td>
    <td> 9 </td>
    <td> 1 </td>
  </tr>
  <tr>
    <td> {{ formfield 'Sudoku6' }} </td>
    <td> 2 </td>
    <td> 9 </td>
    <td> 1 </td>
    <td> 6 </td>
    <td> 5 </td>
    <td> 8 </td>
    <td> 3 </td>
    <td> 7 </td>
  </tr>
  <tr>
    <td> 3 </td>
    <td> 8 </td>
    <td> 1 </td>
    <td> 4 </td>
    <td> 7 </td>
    <td> 9 </td>
    <td> 6 </td>
    <td> 2 </td>
    <td> {{ formfield 'Sudoku9' }} </td>
  </tr>
</table>




<script>
  function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}



</script>
<br><br>
    {% next_button %}

{% endblock %}