Widget:DSAF Overload Puzzle Program: Difference between revisions

From NOISZ Wiki
No edit summary
No edit summary
Line 4: Line 4:
   <title>Lights Out Puzzle OL</title>
   <title>Lights Out Puzzle OL</title>
   <style>
   <style>
     .cell {
     .OLcell {
       width: 6vw;
       width: 6vw;
       height: 6vw;
       height: 6vw;
Line 13: Line 13:
       display: inline-block;
       display: inline-block;
     }
     }
     .answercell {
     .answerOLcell {
       width: 4vw;
       width: 4vw;
       height: 4vw;
       height: 4vw;
Line 33: Line 33:
   
   
   <nowiki><div align="center"></nowiki>
   <nowiki><div align="center"></nowiki>
     <label for="quizSelect">Pattern Select:</label>
     <label for="OLquizSelect">Pattern Select:</label>
     <select id="quizSelect" onclick="changeQuiz()">
     <select id="OLquizSelect" onclick="changeOLQuiz()">
       <option value=0>Random</option>
       <option value=0>Random</option>
       <option value=1>Diagonal 4 Red Cells(1)</option>
       <option value=1>Diagonal 4 Red Cells(1)</option>
Line 84: Line 84:
   <nowiki></div></nowiki>
   <nowiki></div></nowiki>
  <br/>
  <br/>
   <nowiki><div align="center" id="gameBoard"></nowiki>
   <nowiki><div align="center" id="OLgameBoard"></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 0)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 1)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 2)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(0, 3)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><br></nowiki>
     <nowiki><br></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 0)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 1)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 2)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(1, 3)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 3)"></div></nowiki>
... (772 lines left)
 
Collapse
dsafol.html29 KB
real nishikiyama + vira hours
10:10
what the shit it was working fine last night
now its broke....i shall put this in bc actually yeah looking at the code i get why only one instance at a time can work

 
<!DOCTYPE html>
<html>
<head>
  <title>Lights Out Puzzle OL</title>
  <style>
    .OLcell {
      width: 6vw;
      height: 6vw;
      max-width: 60px;
      max-height: 60px;
      border: 1px solid black;
      background-color: blue;
      display: inline-block;
    }
    .answerOLcell {
      width: 4vw;
      height: 4vw;
      max-width: 40px;
      max-height: 40px;
      border: 1px solid black;
      background-color: blue;
      display: inline-block;
      margin-left: 2vw;
    }
    .space {
      width: 2vw;
      height: 2vw;
      display: inline-block;
    }
  </style>
</head>
<body>
  <nowiki><div align="center"></nowiki>
    <label for="OLquizSelect">Pattern Select:</label>
    <select id="OLquizSelect" onclick="changeOLQuiz()">
      <option value=0>Random</option>
      <option value=1>Diagonal 4 Red Cells(1)</option>
      <option value=2>Diagonal 4 Red Cells(2)</option>
      <option value=3>Diagonal 4 Red Cells(3)</option>
      <option value=4>Diagonal 5 Red Cells(1)</option>
      <option value=5>Diagonal 5 Red Cells(2)</option>
      <option value=6>Diagonal 7 Red Cells(1)</option>
      <option value=7>Diagonal 7 Red Cells(2)</option>
      <option value=8>Diagonal Half & Half(1)</option>
      <option value=9>Diagonal Half & Half(2)</option>
      <option value=10>Diagonal Half & Half(3)</option>
      <option value=11>Diagonal 7 Blue Cells(1)</option>
      <option value=12>Diagonal 7 Blue Cells(2)</option>
      <option value=13>Diagonal 7 Blue Cells(3)</option>
      <option value=14>Diagonal 5 Blue Cells(1)</option>
      <option value=15>Diagonal 5 Blue Cells(2)</option>
      <option value=16>Diagonal 5 Blue Cells(3)</option>
      <option value=17>Vertical Border 3 Red Cells(1)</option>
      <option value=18>Vertical Border 4 Red Cells(1)</option>
      <option value=19>Vertical Border 5 Red Cells(1)</option>
      <option value=20>Vertical Border 7 Red Cells(1)</option>
      <option value=21>Vertical Border 7 Red Cells(2)</option>
      <option value=22>Vertical Border 7 Red Cells(3)</option>
      <option value=23>Vertical Border Half & Half(1)</option>
      <option value=24>Vertical Border Half & Half(2)</option>
      <option value=25>Vertical Border Half & Half(3)</option>
      <option value=26>Vertical Border 7 Blue Cells(1)</option>
      <option value=27>Vertical Border 7 Blue Cells(2)</option>
      <option value=28>Vertical Border 7 Blue Cells7(3)</option>
      <option value=29>Vertical Border 7 Blue Cells(4)</option>
      <option value=30>Round 4 Red Cells(1)</option>
      <option value=31>Round 5 Red Cells(1)</option>
      <option value=32>Round 7 Red Cells(1)</option>
      <option value=33>Round Half & Half(1)</option>
      <option value=34>Round Half & Half(2)</option>
      <option value=35>Round 7 Blue Cells(1)</option>
      <option value=36>Round 5 Blue Cells(1)</option>
      <option value=37>Round 3 Blue Cells(1)</option>
      <option value=38>Four Corners 4 Red Cells(1)</option>
      <option value=39>Four Corners 4 Red Cells(2)</option>
      <option value=40>Four Corners 5 Red Cells(1)</option>
      <option value=41>Four Corners 5 Red Cells(2)</option>
      <option value=42>Four Corners 7 Red Cells(1)</option>
      <option value=43>Four Corners 7 Red Cells(2)</option>
      <option value=44>Four Corners Half & Half(1)</option>
      <option value=45>Four Corners 5 Blue Cells(1)</option>
    </select>
  <nowiki></div></nowiki>
<br/>
  <nowiki><div align="center" id="OLgameBoard"></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 0)"></div></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 1)"></div></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 2)"></div></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(0, 3)"></div></nowiki>
    <nowiki><div class="space"></div></nowiki>
    <nowiki><div class="answerOLcell"></div></nowiki>
    <nowiki><div class="answerOLcell"></div></nowiki>
    <nowiki><div class="answerOLcell"></div></nowiki>
    <nowiki><div class="answerOLcell"></div></nowiki>
    <nowiki><br></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 0)"></div></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 1)"></div></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 2)"></div></nowiki>
    <nowiki><div class="OLcell" onclick="OLtoggleLights(1, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><br></nowiki>
     <nowiki><br></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 0)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(2, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 1)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(2, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 2)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(2, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(2, 3)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(2, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><br></nowiki>
     <nowiki><br></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 0)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(3, 0)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 1)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(3, 1)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 2)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(3, 2)"></div></nowiki>
     <nowiki><div class="cell" onclick="toggleLights(3, 3)"></div></nowiki>
     <nowiki><div class="OLcell" onclick="OLtoggleLights(3, 3)"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="space"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
     <nowiki><div class="answercell"></div></nowiki>
     <nowiki><div class="answerOLcell"></div></nowiki>
   <nowiki></div></nowiki>
   <nowiki></div></nowiki>
   
   
   <script>
   <script>
     const size = 4;
     const OLsize = 4;
     const quiz = [
     const OLquiz = [
       {name: "斜め赤4(1)",
       {name: "斜め赤4(1)",
         grid: [
         OLgrid: [
           [false, true, false, false],
           [false, true, false, false],
           [false, false, false, false],
           [false, false, false, false],
Line 136: Line 247:
           [false, false, true, true]
           [false, false, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 144: Line 255:
       },
       },
       {name: "斜め赤4(2)",
       {name: "斜め赤4(2)",
         grid: [
         OLgrid: [
           [true, false, false, true],
           [true, false, false, true],
           [false, false, false, false],
           [false, false, false, false],
Line 150: Line 261:
           [true, false, false, true]
           [true, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 158: Line 269:
       },
       },
       {name: "斜め赤4(3)",
       {name: "斜め赤4(3)",
       grid: [
       OLgrid: [
           [false, false, false, false],
           [false, false, false, false],
           [false, true, true, false],
           [false, true, true, false],
Line 164: Line 275:
           [false, false, false, false]
           [false, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 172: Line 283:
       },
       },
       {name: "斜め赤5(1)",
       {name: "斜め赤5(1)",
       grid: [
       OLgrid: [
           [false, true, false, false],
           [false, true, false, false],
           [false, false, true, false],
           [false, false, true, false],
Line 178: Line 289:
           [false, false, false, false]
           [false, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 186: Line 297:
       },
       },
       {name: "斜め赤5(2)",
       {name: "斜め赤5(2)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [false, false, false, false],
           [false, false, false, false],
Line 192: Line 303:
           [false, false, false, true]
           [false, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 200: Line 311:
       },
       },
       {name: "斜め赤7(1)",
       {name: "斜め赤7(1)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [false, true, true, false],
           [false, true, true, false],
Line 206: Line 317:
           [false, false, false, true]
           [false, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 214: Line 325:
       },
       },
       {name: "斜め赤7(2)",
       {name: "斜め赤7(2)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [false, false, true, true],
           [false, false, true, true],
Line 220: Line 331:
           [true, false, false, true]
           [true, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 228: Line 339:
       },
       },
       {name: "斜め半々(1)",
       {name: "斜め半々(1)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [true, true, false, true],
           [true, true, false, true],
Line 234: Line 345:
           [false, true, false, false]
           [false, true, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 242: Line 353:
       },
       },
       {name: "斜め半々(2)",
       {name: "斜め半々(2)",
       grid: [
       OLgrid: [
           [true, false, false, true],
           [true, false, false, true],
           [false, false, true, true],
           [false, false, true, true],
Line 248: Line 359:
           [false, false, false, true]
           [false, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 256: Line 367:
       },
       },
       {name: "斜め半々(3)",
       {name: "斜め半々(3)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [false, false, true, false],
           [false, false, true, false],
Line 262: Line 373:
           [false, true, false, false]
           [false, true, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 270: Line 381:
       },
       },
       {name: "斜め青7(1)",
       {name: "斜め青7(1)",
       grid: [
       OLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, true],
           [false, true, true, true],
Line 276: Line 387:
           [false, false, true, false]
           [false, false, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 284: Line 395:
       },
       },
       {name: "斜め青7(2)",
       {name: "斜め青7(2)",
       grid: [
       OLgrid: [
           [true, true, false, false],
           [true, true, false, false],
           [false, false, true, true],
           [false, false, true, true],
Line 290: Line 401:
           [false, true, true, false]
           [false, true, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 298: Line 409:
       },
       },
       {name: "斜め青7(3)",
       {name: "斜め青7(3)",
       grid: [
       OLgrid: [
           [true, false, false, true],
           [true, false, false, true],
           [false, false, true, true],
           [false, false, true, true],
Line 304: Line 415:
           [false, true, false, true]
           [false, true, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 312: Line 423:
       },
       },
       {name: "斜め青5(1)",
       {name: "斜め青5(1)",
       grid: [
       OLgrid: [
           [true, false, true, true],
           [true, false, true, true],
           [true, true, false, true],
           [true, true, false, true],
Line 318: Line 429:
           [true, true, true, true]
           [true, true, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 326: Line 437:
       },
       },
       {name: "斜め青5(2)",
       {name: "斜め青5(2)",
       grid: [
       OLgrid: [
           [true, false, true, false],
           [true, false, true, false],
           [true, false, true, false],
           [true, false, true, false],
Line 332: Line 443:
           [true, true, true, true]
           [true, true, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 340: Line 451:
       },
       },
       {name: "斜め青5(3)",
       {name: "斜め青5(3)",
       grid: [
       OLgrid: [
           [true, true, false, false],
           [true, true, false, false],
           [true, false, true, true],
           [true, false, true, true],
Line 346: Line 457:
           [true, true, true, true]
           [true, true, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, true, false, true],
           [true, true, false, true],
Line 354: Line 465:
       },
       },
       {name: "縦ボーダー赤3(1)",
       {name: "縦ボーダー赤3(1)",
       grid: [
       OLgrid: [
           [false, false, true, false],
           [false, false, true, false],
           [false, false, false, false],
           [false, false, false, false],
Line 360: Line 471:
           [true, false, false, false]
           [true, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 368: Line 479:
       },
       },
       {name: "縦ボーダー赤4(1)",
       {name: "縦ボーダー赤4(1)",
       grid: [
       OLgrid: [
           [false, false, false, false],
           [false, false, false, false],
           [true, true, false, false],
           [true, true, false, false],
Line 374: Line 485:
           [true, false, false, false]
           [true, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 382: Line 493:
       },
       },
       {name: "縦ボーダー赤5(1)",
       {name: "縦ボーダー赤5(1)",
       grid: [
       OLgrid: [
           [false, true, false, false],
           [false, true, false, false],
           [false, false, false, false],
           [false, false, false, false],
Line 388: Line 499:
           [true, true, true, false]
           [true, true, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 396: Line 507:
       },
       },
       {name: "縦ボーダー赤7(1)",
       {name: "縦ボーダー赤7(1)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 402: Line 513:
           [true, false, false, false]
           [true, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 410: Line 521:
       },
       },
       {name: "縦ボーダー赤7(2)",
       {name: "縦ボーダー赤7(2)",
       grid: [
       OLgrid: [
           [false, false, true, false],
           [false, false, true, false],
           [true, false, false, false],
           [true, false, false, false],
Line 416: Line 527:
           [true, true, true, false]
           [true, true, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 424: Line 535:
       },
       },
       {name: "縦ボーダー赤7(3)",
       {name: "縦ボーダー赤7(3)",
       grid: [
       OLgrid: [
           [true, false, false, false],
           [true, false, false, false],
           [true, true, false, true],
           [true, true, false, true],
Line 430: Line 541:
           [false, true, false, true]
           [false, true, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 438: Line 549:
       },
       },
       {name: "縦ボーダー半々(1)",
       {name: "縦ボーダー半々(1)",
       grid: [
       OLgrid: [
           [true, false, false, false],
           [true, false, false, false],
           [true, true, false, true],
           [true, true, false, true],
Line 444: Line 555:
           [false, false, false, true]
           [false, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 452: Line 563:
       },
       },
       {name: "縦ボーダー半々(2)",
       {name: "縦ボーダー半々(2)",
       grid: [
       OLgrid: [
           [false, false, true, false],
           [false, false, true, false],
           [true, false, false, true],
           [true, false, false, true],
Line 458: Line 569:
           [true, true, false, false]
           [true, true, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 466: Line 577:
       },
       },
       {name: "縦ボーダー半々(3)",
       {name: "縦ボーダー半々(3)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [true, false, false, true],
           [true, false, false, true],
Line 472: Line 583:
           [false, true, false, true]
           [false, true, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 480: Line 591:
       },
       },
       {name: "縦ボーダー青7(1)",
       {name: "縦ボーダー青7(1)",
       grid: [
       OLgrid: [
           [false, false, false, false],
           [false, false, false, false],
           [false, true, true, true],
           [false, true, true, true],
Line 486: Line 597:
           [true, true, false, true]
           [true, true, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 494: Line 605:
       },
       },
       {name: "縦ボーダー青7(2)",
       {name: "縦ボーダー青7(2)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [false, true, true, false],
           [false, true, true, false],
Line 500: Line 611:
           [true, true, true, false]
           [true, true, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 508: Line 619:
       },
       },
       {name: "縦ボーダー青7(3)",
       {name: "縦ボーダー青7(3)",
       grid: [
       OLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [false, true, false, false],
           [false, true, false, false],
Line 514: Line 625:
           [false, true, false, true]
           [false, true, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 522: Line 633:
       },
       },
       {name: "縦ボーダー青7(4)",
       {name: "縦ボーダー青7(4)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [true, true, true, false],
           [true, true, true, false],
Line 528: Line 639:
           [false, false, false, true]
           [false, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 536: Line 647:
       },
       },
       {name: "円形赤4(1)",
       {name: "円形赤4(1)",
       grid: [
       OLgrid: [
           [false, false, false, true],
           [false, false, false, true],
           [false, false, true, false],
           [false, false, true, false],
Line 542: Line 653:
           [true, false, false, false]
           [true, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 550: Line 661:
       },
       },
       {name: "円形赤5(1)",
       {name: "円形赤5(1)",
       grid: [
       OLgrid: [
           [false, true, false, false],
           [false, true, false, false],
           [false, false, true, false],
           [false, false, true, false],
Line 556: Line 667:
           [true, false, false, true]
           [true, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 564: Line 675:
       },
       },
       {name: "円形赤7(1)",
       {name: "円形赤7(1)",
       grid: [
       OLgrid: [
           [true, false, true, false],
           [true, false, true, false],
           [false, true, true, false],
           [false, true, true, false],
Line 570: Line 681:
           [false, false, false, true]
           [false, false, false, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 578: Line 689:
       },
       },
       {name: "円形半々(1)",
       {name: "円形半々(1)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [false, true, false, false],
           [false, true, false, false],
Line 584: Line 695:
           [true, false, true, true]
           [true, false, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 592: Line 703:
       },
       },
       {name: "円形半々(2)",
       {name: "円形半々(2)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 598: Line 709:
           [false, false, true, true]
           [false, false, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 606: Line 717:
       },
       },
       {name: "円形青7(1)",
       {name: "円形青7(1)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [true, false, false, true],
           [true, false, false, true],
Line 612: Line 723:
           [true, true, true, false]
           [true, true, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 620: Line 731:
       },
       },
       {name: "円形青5(1)",
       {name: "円形青5(1)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [true, true, true, false],
           [true, true, true, false],
Line 626: Line 737:
           [true, true, true, false]
           [true, true, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 634: Line 745:
       },
       },
       {name: "円形青3(1)",
       {name: "円形青3(1)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [true, true, true, true],
           [true, true, true, true],
Line 640: Line 751:
           [false, true, true, true]
           [false, true, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 648: Line 759:
       },
       },
       {name: "四方形赤4(1)",
       {name: "四方形赤4(1)",
       grid: [
       OLgrid: [
           [false, false, false, true],
           [false, false, false, true],
           [false, false, true, false],
           [false, false, true, false],
Line 654: Line 765:
           [true, false, false, false]
           [true, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 662: Line 773:
       },
       },
       {name: "四方形赤4(2)",
       {name: "四方形赤4(2)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [false, true, false, false],
           [false, true, false, false],
Line 668: Line 779:
           [false, true, false, false]
           [false, true, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 676: Line 787:
       },
       },
       {name: "四方形赤5(1)",
       {name: "四方形赤5(1)",
       grid: [
       OLgrid: [
           [false, true, false, false],
           [false, true, false, false],
           [true, false, false, false],
           [true, false, false, false],
Line 682: Line 793:
           [false, true, true, true]
           [false, true, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 690: Line 801:
       },
       },
       {name: "四方形赤5(2)",
       {name: "四方形赤5(2)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [false, false, false, false],
           [false, false, false, false],
Line 696: Line 807:
           [true, false, false, false]
           [true, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 704: Line 815:
       },
       },
       {name: "四方形赤7(1)",
       {name: "四方形赤7(1)",
       grid: [
       OLgrid: [
           [true, false, true, true],
           [true, false, true, true],
           [false, false, true, false],
           [false, false, true, false],
Line 710: Line 821:
           [false, false, false, false]
           [false, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 718: Line 829:
       },
       },
       {name: "四方形赤7(2)",
       {name: "四方形赤7(2)",
       grid: [
       OLgrid: [
           [true, true, true, false],
           [true, true, true, false],
           [true, false, false, false],
           [true, false, false, false],
Line 724: Line 835:
           [false, true, false, false]
           [false, true, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 732: Line 843:
       },
       },
       {name: "四方形半々(1)",
       {name: "四方形半々(1)",
       grid: [
       OLgrid: [
           [true, false, true, false],
           [true, false, true, false],
           [false, false, false, false],
           [false, false, false, false],
Line 738: Line 849:
           [true, false, true, false]
           [true, false, true, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 746: Line 857:
       },
       },
       {name: "四方形青5(1)",
       {name: "四方形青5(1)",
       grid: [
       OLgrid: [
           [true, true, false, false],
           [true, true, false, false],
           [true, true, true, true],
           [true, true, true, true],
Line 752: Line 863:
           [false, true, true, true]
           [false, true, true, true]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [false, true, true, false],
           [false, true, true, false],
           [true, true, true, true],
           [true, true, true, true],
Line 760: Line 871:
       },
       },
       {name: "Default",
       {name: "Default",
         grid: [
         OLgrid: [
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
Line 766: Line 877:
           [false, false, false, false]
           [false, false, false, false]
         ],
         ],
         answergrid: [
         answerOLgrid: [
           [true, true, true, true],
           [true, true, true, true],
           [true, true, true, true],
           [true, true, true, true],
Line 775: Line 886:
     ];
     ];
   
   
     const grid= [
     const OLgrid= [
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
Line 782: Line 893:
     ];
     ];
   
   
     let Quiz = quiz[quiz.length-1];
     let OLQuiz = OLquiz[OLquiz.length-1];
   
   
     function initializeBoard() {
     function OLinitializeBoard() {
       const gameBoard = document.getElementById("gameBoard");
       const OLgameBoard = document.getElementById("OLgameBoard");
       const cells = gameBoard.getElementsByClassName("cell");
       const OLcells = OLgameBoard.getElementsByClassName("OLcell");
       const answercells = gameBoard.getElementsByClassName("answercell");
       const answerOLcells = OLgameBoard.getElementsByClassName("answerOLcell");
   
   
       for (let i = 0; i < cells.length; i++) {
       for (let i = 0; i < OLcells.length; i++) {
         const row = Math.floor(i / size);
         const row = Math.floor(i / OLsize);
         const col = i % size;
         const col = i % OLsize;
   
   
         const cell = cells[i];
         const OLcell = OLcells[i];
         cell.style.backgroundColor = grid[row][col] ? "red" : "blue";
         OLcell.style.backgroundColor = OLgrid[row][col] ? "red" : "blue";
         cell.style.cursor = "pointer";
         OLcell.style.cursor = "pointer";
   
   
         const answercell = answercells[i];
         const answerOLcell = answerOLcells[i];
         answercell.style.backgroundColor = Quiz.answergrid[row][col] ? "red" : "blue";
         answerOLcell.style.backgroundColor = OLQuiz.answerOLgrid[row][col] ? "red" : "blue";
       }
       }
     }
     }
   
   
     function toggleLights(row, col) {
     function OLtoggleLights(row, col) {
       grid[row][col] = !grid[row][col];
       OLgrid[row][col] = !OLgrid[row][col];
       if (row > 0) {
       if (row > 0) {
         grid[row - 1][col] = !grid[row - 1][col];
         OLgrid[row - 1][col] = !OLgrid[row - 1][col];
       }
       }
       if (row < size - 1) {
       if (row < OLsize - 1) {
         grid[row + 1][col] = !grid[row + 1][col];
         OLgrid[row + 1][col] = !OLgrid[row + 1][col];
       }
       }
       if (col > 0) {
       if (col > 0) {
         grid[row][col-1] = !grid[row][col-1];
         OLgrid[row][col-1] = !OLgrid[row][col-1];
       }
       }
       if (col < size - 1) {
       if (col < OLsize - 1) {
         grid[row][col+1] = !grid[row][col+1];
         OLgrid[row][col+1] = !OLgrid[row][col+1];
       }
       }
       initializeBoard();
       OLinitializeBoard();
       checkWin();
       OLcheckWin();
     }
     }
   
   
     function checkWin() {
     function OLcheckWin() {
       const gameBoard = document.getElementById("gameBoard");
       const OLgameBoard = document.getElementById("OLgameBoard");
       const cells = gameBoard.getElementsByClassName("cell");
       const OLcells = OLgameBoard.getElementsByClassName("OLcell");
   
   
       for (let i = 0; i < cells.length; i++) {
       for (let i = 0; i < OLcells.length; i++) {
         const row = Math.floor(i / size);
         const row = Math.floor(i / OLsize);
         const col = i % size;
         const col = i % OLsize;
   
   
         if (grid[row][col] !== Quiz.answergrid[row][col]) {
         if (OLgrid[row][col] !== OLQuiz.answerOLgrid[row][col]) {
           return;
           return;
         }
         }
Line 835: Line 946:
     }
     }
   
   
     function setgrid(){
     function setOLgrid(){
         const cells = gameBoard.getElementsByClassName("cell");
         const OLcells = OLgameBoard.getElementsByClassName("OLcell");
         for (let i = 0; i < cells.length; i++) {
         for (let i = 0; i < OLcells.length; i++) {
             const row = Math.floor(i / size);
             const row = Math.floor(i / OLsize);
             const col = i % size;
             const col = i % OLsize;
             grid[row][col] = Quiz.grid[row][col];
             OLgrid[row][col] = OLQuiz.OLgrid[row][col];
         }
         }
     }
     }
   
   
     function changeQuiz() {
     function changeOLQuiz() {
       const selectElement = document.getElementById("quizSelect");
       const selectElement = document.getElementById("OLquizSelect");
       const selectedQuiz = selectElement.value;
       const selectedOLQuiz = selectElement.value;
       const cells = gameBoard.getElementsByClassName("cell");
       const OLcells = OLgameBoard.getElementsByClassName("OLcell");
       if (selectedQuiz === "0") {
       if (selectedOLQuiz === "0") {
         Quiz = quiz[Math.floor(Math.random() * (quiz.length-1))];
         OLQuiz = OLquiz[Math.floor(Math.random() * (OLquiz.length-1))];
       } else {
       } else {
         Quiz = quiz[selectedQuiz-1];
         OLQuiz = OLquiz[selectedOLQuiz-1];
       }
       }
       for (let i = 0; i < cells.length; i++) {
       for (let i = 0; i < OLcells.length; i++) {
             const row = Math.floor(i / size);
             const row = Math.floor(i / OLsize);
             const col = i % size;
             const col = i % OLsize;
             grid[row][col] = Quiz.grid[row][col];
             OLgrid[row][col] = OLQuiz.OLgrid[row][col];
       }
       }
   
   
       setgrid();
       setOLgrid();
       initializeBoard();
       OLinitializeBoard();
     }
     }
   
   
     initializeBoard();
     OLinitializeBoard();
   </script>
   </script>
  </body>
  </body>

Revision as of 05:11, 24 November 2025

<!DOCTYPE html>

<html>
<head>
  <title>Lights Out Puzzle OL</title>
  <style>
    .OLcell {
      width: 6vw;
      height: 6vw;
      max-width: 60px;
      max-height: 60px;
      border: 1px solid black;
      background-color: blue;
      display: inline-block;
    }
    .answerOLcell {
      width: 4vw;
      height: 4vw;
      max-width: 40px;
      max-height: 40px;
      border: 1px solid black;
      background-color: blue;
      display: inline-block;
      margin-left: 2vw;
    }
    .space {
      width: 2vw;
      height: 2vw;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div align="center">
    <label for="OLquizSelect">Pattern Select:</label>
    <select id="OLquizSelect" onclick="changeOLQuiz()">
      <option value=0>Random</option>
      <option value=1>Diagonal 4 Red Cells(1)</option>
      <option value=2>Diagonal 4 Red Cells(2)</option>
      <option value=3>Diagonal 4 Red Cells(3)</option>
      <option value=4>Diagonal 5 Red Cells(1)</option>
      <option value=5>Diagonal 5 Red Cells(2)</option>
      <option value=6>Diagonal 7 Red Cells(1)</option>
      <option value=7>Diagonal 7 Red Cells(2)</option>
      <option value=8>Diagonal Half & Half(1)</option>
      <option value=9>Diagonal Half & Half(2)</option>
      <option value=10>Diagonal Half & Half(3)</option>
      <option value=11>Diagonal 7 Blue Cells(1)</option>
      <option value=12>Diagonal 7 Blue Cells(2)</option>
      <option value=13>Diagonal 7 Blue Cells(3)</option>
      <option value=14>Diagonal 5 Blue Cells(1)</option>
      <option value=15>Diagonal 5 Blue Cells(2)</option>
      <option value=16>Diagonal 5 Blue Cells(3)</option>
      <option value=17>Vertical Border 3 Red Cells(1)</option>
      <option value=18>Vertical Border 4 Red Cells(1)</option>
      <option value=19>Vertical Border 5 Red Cells(1)</option>
      <option value=20>Vertical Border 7 Red Cells(1)</option>
      <option value=21>Vertical Border 7 Red Cells(2)</option>
      <option value=22>Vertical Border 7 Red Cells(3)</option>
      <option value=23>Vertical Border Half & Half(1)</option>
      <option value=24>Vertical Border Half & Half(2)</option>
      <option value=25>Vertical Border Half & Half(3)</option>
      <option value=26>Vertical Border 7 Blue Cells(1)</option>
      <option value=27>Vertical Border 7 Blue Cells(2)</option>
      <option value=28>Vertical Border 7 Blue Cells7(3)</option>
      <option value=29>Vertical Border 7 Blue Cells(4)</option>
      <option value=30>Round 4 Red Cells(1)</option>
      <option value=31>Round 5 Red Cells(1)</option>
      <option value=32>Round 7 Red Cells(1)</option>
      <option value=33>Round Half & Half(1)</option>
      <option value=34>Round Half & Half(2)</option>
      <option value=35>Round 7 Blue Cells(1)</option>
      <option value=36>Round 5 Blue Cells(1)</option>
      <option value=37>Round 3 Blue Cells(1)</option>
      <option value=38>Four Corners 4 Red Cells(1)</option>
      <option value=39>Four Corners 4 Red Cells(2)</option>
      <option value=40>Four Corners 5 Red Cells(1)</option>
      <option value=41>Four Corners 5 Red Cells(2)</option>
      <option value=42>Four Corners 7 Red Cells(1)</option>
      <option value=43>Four Corners 7 Red Cells(2)</option>
      <option value=44>Four Corners Half & Half(1)</option>
      <option value=45>Four Corners 5 Blue Cells(1)</option>
    </select>
  </div>

<div align="center" id="OLgameBoard"> <div class="OLcell" onclick="OLtoggleLights(0, 0)"></div> <div class="OLcell" onclick="OLtoggleLights(0, 1)"></div> <div class="OLcell" onclick="OLtoggleLights(0, 2)"></div> <div class="OLcell" onclick="OLtoggleLights(0, 3)"></div> <div class="space"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <br> <div class="OLcell" onclick="OLtoggleLights(1, 0)"></div> <div class="OLcell" onclick="OLtoggleLights(1, 1)"></div> <div class="OLcell" onclick="OLtoggleLights(1, 2)"></div> <div class="OLcell" onclick="OLtoggleLights(1, 3)"></div>

... (772 lines left)

Collapse dsafol.html29 KB real nishikiyama + vira hours

10:10 what the shit it was working fine last night now its broke....i shall put this in bc actually yeah looking at the code i get why only one instance at a time can work 

<!DOCTYPE html>

<html>
<head>
  <title>Lights Out Puzzle OL</title>
  <style>
    .OLcell {
      width: 6vw;
      height: 6vw;
      max-width: 60px;
      max-height: 60px;
      border: 1px solid black;
      background-color: blue;
      display: inline-block;
    }
    .answerOLcell {
      width: 4vw;
      height: 4vw;
      max-width: 40px;
      max-height: 40px;
      border: 1px solid black;
      background-color: blue;
      display: inline-block;
      margin-left: 2vw;
    }
    .space {
      width: 2vw;
      height: 2vw;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div align="center">
    <label for="OLquizSelect">Pattern Select:</label>
    <select id="OLquizSelect" onclick="changeOLQuiz()">
      <option value=0>Random</option>
      <option value=1>Diagonal 4 Red Cells(1)</option>
      <option value=2>Diagonal 4 Red Cells(2)</option>
      <option value=3>Diagonal 4 Red Cells(3)</option>
      <option value=4>Diagonal 5 Red Cells(1)</option>
      <option value=5>Diagonal 5 Red Cells(2)</option>
      <option value=6>Diagonal 7 Red Cells(1)</option>
      <option value=7>Diagonal 7 Red Cells(2)</option>
      <option value=8>Diagonal Half & Half(1)</option>
      <option value=9>Diagonal Half & Half(2)</option>
      <option value=10>Diagonal Half & Half(3)</option>
      <option value=11>Diagonal 7 Blue Cells(1)</option>
      <option value=12>Diagonal 7 Blue Cells(2)</option>
      <option value=13>Diagonal 7 Blue Cells(3)</option>
      <option value=14>Diagonal 5 Blue Cells(1)</option>
      <option value=15>Diagonal 5 Blue Cells(2)</option>
      <option value=16>Diagonal 5 Blue Cells(3)</option>
      <option value=17>Vertical Border 3 Red Cells(1)</option>
      <option value=18>Vertical Border 4 Red Cells(1)</option>
      <option value=19>Vertical Border 5 Red Cells(1)</option>
      <option value=20>Vertical Border 7 Red Cells(1)</option>
      <option value=21>Vertical Border 7 Red Cells(2)</option>
      <option value=22>Vertical Border 7 Red Cells(3)</option>
      <option value=23>Vertical Border Half & Half(1)</option>
      <option value=24>Vertical Border Half & Half(2)</option>
      <option value=25>Vertical Border Half & Half(3)</option>
      <option value=26>Vertical Border 7 Blue Cells(1)</option>
      <option value=27>Vertical Border 7 Blue Cells(2)</option>
      <option value=28>Vertical Border 7 Blue Cells7(3)</option>
      <option value=29>Vertical Border 7 Blue Cells(4)</option>
      <option value=30>Round 4 Red Cells(1)</option>
      <option value=31>Round 5 Red Cells(1)</option>
      <option value=32>Round 7 Red Cells(1)</option>
      <option value=33>Round Half & Half(1)</option>
      <option value=34>Round Half & Half(2)</option>
      <option value=35>Round 7 Blue Cells(1)</option>
      <option value=36>Round 5 Blue Cells(1)</option>
      <option value=37>Round 3 Blue Cells(1)</option>
      <option value=38>Four Corners 4 Red Cells(1)</option>
      <option value=39>Four Corners 4 Red Cells(2)</option>
      <option value=40>Four Corners 5 Red Cells(1)</option>
      <option value=41>Four Corners 5 Red Cells(2)</option>
      <option value=42>Four Corners 7 Red Cells(1)</option>
      <option value=43>Four Corners 7 Red Cells(2)</option>
      <option value=44>Four Corners Half & Half(1)</option>
      <option value=45>Four Corners 5 Blue Cells(1)</option>
    </select>
  </div>

<div align="center" id="OLgameBoard"> <div class="OLcell" onclick="OLtoggleLights(0, 0)"></div> <div class="OLcell" onclick="OLtoggleLights(0, 1)"></div> <div class="OLcell" onclick="OLtoggleLights(0, 2)"></div> <div class="OLcell" onclick="OLtoggleLights(0, 3)"></div> <div class="space"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <br> <div class="OLcell" onclick="OLtoggleLights(1, 0)"></div> <div class="OLcell" onclick="OLtoggleLights(1, 1)"></div> <div class="OLcell" onclick="OLtoggleLights(1, 2)"></div> <div class="OLcell" onclick="OLtoggleLights(1, 3)"></div> <div class="space"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <br> <div class="OLcell" onclick="OLtoggleLights(2, 0)"></div> <div class="OLcell" onclick="OLtoggleLights(2, 1)"></div> <div class="OLcell" onclick="OLtoggleLights(2, 2)"></div> <div class="OLcell" onclick="OLtoggleLights(2, 3)"></div> <div class="space"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <br> <div class="OLcell" onclick="OLtoggleLights(3, 0)"></div> <div class="OLcell" onclick="OLtoggleLights(3, 1)"></div> <div class="OLcell" onclick="OLtoggleLights(3, 2)"></div> <div class="OLcell" onclick="OLtoggleLights(3, 3)"></div> <div class="space"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> <div class="answerOLcell"></div> </div> <script> const OLsize = 4; const OLquiz = [ {name: "斜め赤4(1)", OLgrid: [ [false, true, false, false], [false, false, false, false], [false, true, false, false], [false, false, true, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め赤4(2)", OLgrid: [ [true, false, false, true], [false, false, false, false], [false, false, false, false], [true, false, false, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め赤4(3)", OLgrid: [ [false, false, false, false], [false, true, true, false], [false, true, true, false], [false, false, false, false] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め赤5(1)", OLgrid: [ [false, true, false, false], [false, false, true, false], [true, true, true, false], [false, false, false, false] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め赤5(2)", OLgrid: [ [false, false, true, true], [false, false, false, false], [false, false, true, true], [false, false, false, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め赤7(1)", OLgrid: [ [false, true, false, true], [false, true, true, false], [true, false, true, false], [false, false, false, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め赤7(2)", OLgrid: [ [true, true, false, true], [false, false, true, true], [false, false, false, false], [true, false, false, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め半々(1)", OLgrid: [ [true, true, false, true], [true, true, false, true], [false, true, false, false], [false, true, false, false] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め半々(2)", OLgrid: [ [true, false, false, true], [false, false, true, true], [true, true, true, false], [false, false, false, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め半々(3)", OLgrid: [ [true, true, false, true], [false, false, true, false], [true, false, true, true], [false, true, false, false] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め青7(1)", OLgrid: [ [false, true, true, false], [false, true, true, true], [true, false, true, true], [false, false, true, false] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め青7(2)", OLgrid: [ [true, true, false, false], [false, false, true, true], [true, true, false, true], [false, true, true, false] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め青7(3)", OLgrid: [ [true, false, false, true], [false, false, true, true], [true, true, false, true], [false, true, false, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め青5(1)", OLgrid: [ [true, false, true, true], [true, true, false, true], [false, false, false, true], [true, true, true, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め青5(2)", OLgrid: [ [true, false, true, false], [true, false, true, false], [true, true, false, true], [true, true, true, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "斜め青5(3)", OLgrid: [ [true, true, false, false], [true, false, true, true], [true, true, false, false], [true, true, true, true] ], answerOLgrid: [ [true, true, true, false], [true, true, false, true], [true, false, true, true], [false, true, true, true] ] }, {name: "縦ボーダー赤3(1)", OLgrid: [ [false, false, true, false], [false, false, false, false], [false, false, false, true], [true, false, false, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー赤4(1)", OLgrid: [ [false, false, false, false], [true, true, false, false], [false, false, false, true], [true, false, false, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー赤5(1)", OLgrid: [ [false, true, false, false], [false, false, false, false], [false, false, false, true], [true, true, true, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー赤7(1)", OLgrid: [ [false, false, true, true], [true, false, false, true], [true, true, false, false], [true, false, false, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー赤7(2)", OLgrid: [ [false, false, true, false], [true, false, false, false], [true, false, false, true], [true, true, true, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー赤7(3)", OLgrid: [ [true, false, false, false], [true, true, false, true], [true, false, false, false], [false, true, false, true] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー半々(1)", OLgrid: [ [true, false, false, false], [true, true, false, true], [true, false, true, true], [false, false, false, true] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー半々(2)", OLgrid: [ [false, false, true, false], [true, false, false, true], [true, false, true, true], [true, true, false, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー半々(3)", OLgrid: [ [false, true, false, true], [true, false, false, true], [false, true, true, false], [false, true, false, true] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー青7(1)", OLgrid: [ [false, false, false, false], [false, true, true, true], [true, true, false, true], [true, true, false, true] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー青7(2)", OLgrid: [ [false, false, true, true], [false, true, true, false], [true, true, false, false], [true, true, true, false] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー青7(3)", OLgrid: [ [true, true, true, false], [false, true, false, false], [true, true, true, false], [false, true, false, true] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "縦ボーダー青7(4)", OLgrid: [ [false, true, false, true], [true, true, true, false], [true, true, false, true], [false, false, false, true] ], answerOLgrid: [ [false, true, true, false], [false, true, true, false], [false, true, true, false], [false, true, true, false] ] }, {name: "円形赤4(1)", OLgrid: [ [false, false, false, true], [false, false, true, false], [false, true, false, false], [true, false, false, false] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形赤5(1)", OLgrid: [ [false, true, false, false], [false, false, true, false], [true, false, false, false], [true, false, false, true] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形赤7(1)", OLgrid: [ [true, false, true, false], [false, true, true, false], [false, false, true, true], [false, false, false, true] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形半々(1)", OLgrid: [ [false, true, false, true], [false, true, false, false], [false, true, true, false], [true, false, true, true] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形半々(2)", OLgrid: [ [false, false, true, true], [true, false, false, true], [false, true, true, false], [false, false, true, true] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形青7(1)", OLgrid: [ [false, true, false, true], [true, false, false, true], [true, true, false, false], [true, true, true, false] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形青5(1)", OLgrid: [ [true, true, false, true], [true, true, true, false], [false, true, true, false], [true, true, true, false] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "円形青3(1)", OLgrid: [ [true, true, false, true], [true, true, true, true], [true, true, true, false], [false, true, true, true] ], answerOLgrid: [ [true, true, true, true], [true, false, false, true], [true, false, false, true], [true, true, true, true] ] }, {name: "四方形赤4(1)", OLgrid: [ [false, false, false, true], [false, false, true, false], [false, true, false, false], [true, false, false, false] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形赤4(2)", OLgrid: [ [false, false, true, true], [false, true, false, false], [false, false, false, false], [false, true, false, false] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形赤5(1)", OLgrid: [ [false, true, false, false], [true, false, false, false], [false, false, false, false], [false, true, true, true] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形赤5(2)", OLgrid: [ [false, false, true, true], [false, false, false, false], [false, true, false, true], [true, false, false, false] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形赤7(1)", OLgrid: [ [true, false, true, true], [false, false, true, false], [false, true, true, true], [false, false, false, false] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形赤7(2)", OLgrid: [ [true, true, true, false], [true, false, false, false], [true, false, false, true], [false, true, false, false] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形半々(1)", OLgrid: [ [true, false, true, false], [false, false, false, false], [true, true, true, true], [true, false, true, false] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "四方形青5(1)", OLgrid: [ [true, true, false, false], [true, true, true, true], [true, false, true, false], [false, true, true, true] ], answerOLgrid: [ [false, true, true, false], [true, true, true, true], [true, true, true, true], [false, true, true, false] ] }, {name: "Default", OLgrid: [ [false, false, false, false], [false, false, false, false], [false, false, false, false], [false, false, false, false] ], answerOLgrid: [ [true, true, true, true], [true, true, true, true], [true, true, true, true], [true, true, true, true] ] } ]; const OLgrid= [ [false, false, false, false], [false, false, false, false], [false, false, false, false], [false, false, false, false] ]; let OLQuiz = OLquiz[OLquiz.length-1]; function OLinitializeBoard() { const OLgameBoard = document.getElementById("OLgameBoard"); const OLcells = OLgameBoard.getElementsByClassName("OLcell"); const answerOLcells = OLgameBoard.getElementsByClassName("answerOLcell"); for (let i = 0; i < OLcells.length; i++) { const row = Math.floor(i / OLsize); const col = i % OLsize; const OLcell = OLcells[i]; OLcell.style.backgroundColor = OLgrid[row][col] ? "red" : "blue"; OLcell.style.cursor = "pointer"; const answerOLcell = answerOLcells[i]; answerOLcell.style.backgroundColor = OLQuiz.answerOLgrid[row][col] ? "red" : "blue"; } } function OLtoggleLights(row, col) { OLgrid[row][col] = !OLgrid[row][col]; if (row > 0) { OLgrid[row - 1][col] = !OLgrid[row - 1][col]; } if (row < OLsize - 1) { OLgrid[row + 1][col] = !OLgrid[row + 1][col]; } if (col > 0) { OLgrid[row][col-1] = !OLgrid[row][col-1]; } if (col < OLsize - 1) { OLgrid[row][col+1] = !OLgrid[row][col+1]; } OLinitializeBoard(); OLcheckWin(); } function OLcheckWin() { const OLgameBoard = document.getElementById("OLgameBoard"); const OLcells = OLgameBoard.getElementsByClassName("OLcell"); for (let i = 0; i < OLcells.length; i++) { const row = Math.floor(i / OLsize); const col = i % OLsize; if (OLgrid[row][col] !== OLQuiz.answerOLgrid[row][col]) { return; } } alert("Congrats!! You solved the puzzle!"); } function setOLgrid(){ const OLcells = OLgameBoard.getElementsByClassName("OLcell"); for (let i = 0; i < OLcells.length; i++) { const row = Math.floor(i / OLsize); const col = i % OLsize; OLgrid[row][col] = OLQuiz.OLgrid[row][col]; } } function changeOLQuiz() { const selectElement = document.getElementById("OLquizSelect"); const selectedOLQuiz = selectElement.value; const OLcells = OLgameBoard.getElementsByClassName("OLcell"); if (selectedOLQuiz === "0") { OLQuiz = OLquiz[Math.floor(Math.random() * (OLquiz.length-1))]; } else { OLQuiz = OLquiz[selectedOLQuiz-1]; } for (let i = 0; i < OLcells.length; i++) { const row = Math.floor(i / OLsize); const col = i % OLsize; OLgrid[row][col] = OLQuiz.OLgrid[row][col]; } setOLgrid(); OLinitializeBoard(); } OLinitializeBoard(); </script> </body> </html>