Widget:DSAF Overload Puzzle Program: Difference between revisions

From NOISZ Wiki
(Created page with "Copy down the following code and save it to a notepad file, then save the file as .html and run it. <code><!DOCTYPE html> <html> <head> <title>Lights Out Puzzle OL</title> <style> .cell { width: 6vw; height: 6vw; max-width: 60px; max-height: 60px; border: 1px solid black; background-color: blue; display: inline-block; } .answercell { width: 4vw; height: 4vw; max-width: 40px;...")
 
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
Copy down the following code and save it to a notepad file, then save the file as .html and run it.
 
<code><!DOCTYPE html>
<!DOCTYPE html>
  <html>
  <html>
  <head>
  <head>
   <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 14: Line 14:
       display: inline-block;
       display: inline-block;
     }
     }
     .answercell {
     .answerOLcell {
       width: 4vw;
       width: 4vw;
       height: 4vw;
       height: 4vw;
Line 32: Line 32:
  </head>
  </head>
  <body>
  <body>
  <nowiki><h1>Lights Out Puzzle</h1></nowiki>
   
   
   <nowiki><div></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 83: Line 82:
       <option value=44>Four Corners Half & Half(1)</option>
       <option value=44>Four Corners Half & Half(1)</option>
       <option value=45>Four Corners 5 Blue Cells(1)</option>
       <option value=45>Four Corners 5 Blue Cells(1)</option>
     </select>
     </select>
   <nowiki></div></nowiki>
   <nowiki></div></nowiki>
   
  <br/>
   <nowiki><div 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>
     <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 139: Line 137:
           [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 147: Line 145:
       },
       },
       {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 153: Line 151:
           [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 161: Line 159:
       },
       },
       {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 167: Line 165:
           [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 175: Line 173:
       },
       },
       {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 181: Line 179:
           [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 189: Line 187:
       },
       },
       {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 195: Line 193:
           [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 203: Line 201:
       },
       },
       {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 209: Line 207:
           [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 217: Line 215:
       },
       },
       {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 223: Line 221:
           [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 231: Line 229:
       },
       },
       {name: "斜め半々(1)",
       {name: "斜め半々(1)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [true, true, false, true],
           [true, true, false, true],
Line 237: Line 235:
           [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 245: Line 243:
       },
       },
       {name: "斜め半々(2)",
       {name: "斜め半々(2)",
       grid: [
       OLgrid: [
           [true, false, false, true],
           [true, false, false, true],
           [false, false, true, true],
           [false, false, true, true],
Line 251: Line 249:
           [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 259: Line 257:
       },
       },
       {name: "斜め半々(3)",
       {name: "斜め半々(3)",
       grid: [
       OLgrid: [
           [true, true, false, true],
           [true, true, false, true],
           [false, false, true, false],
           [false, false, true, false],
Line 265: Line 263:
           [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 273: Line 271:
       },
       },
       {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 279: Line 277:
           [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 287: Line 285:
       },
       },
       {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 293: Line 291:
           [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 301: Line 299:
       },
       },
       {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 307: Line 305:
           [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 315: Line 313:
       },
       },
       {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 321: Line 319:
           [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 329: Line 327:
       },
       },
       {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 335: Line 333:
           [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 343: Line 341:
       },
       },
       {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 349: Line 347:
           [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 357: Line 355:
       },
       },
       {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 363: Line 361:
           [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 371: Line 369:
       },
       },
       {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 377: Line 375:
           [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 385: Line 383:
       },
       },
       {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 391: Line 389:
           [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 399: Line 397:
       },
       },
       {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 405: Line 403:
           [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 413: Line 411:
       },
       },
       {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 419: Line 417:
           [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 427: Line 425:
       },
       },
       {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 433: Line 431:
           [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 441: Line 439:
       },
       },
       {name: "縦ボーダー半々(1)",
       {name: "縦ボーダー半々(1)",
       grid: [
       OLgrid: [
           [true, false, false, false],
           [true, false, false, false],
           [true, true, false, true],
           [true, true, false, true],
Line 447: Line 445:
           [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 455: Line 453:
       },
       },
       {name: "縦ボーダー半々(2)",
       {name: "縦ボーダー半々(2)",
       grid: [
       OLgrid: [
           [false, false, true, false],
           [false, false, true, false],
           [true, false, false, true],
           [true, false, false, true],
Line 461: Line 459:
           [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 469: Line 467:
       },
       },
       {name: "縦ボーダー半々(3)",
       {name: "縦ボーダー半々(3)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [true, false, false, true],
           [true, false, false, true],
Line 475: Line 473:
           [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 483: Line 481:
       },
       },
       {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 489: Line 487:
           [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 497: Line 495:
       },
       },
       {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 503: Line 501:
           [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 511: Line 509:
       },
       },
       {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 517: Line 515:
           [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 525: Line 523:
       },
       },
       {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 531: Line 529:
           [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 539: Line 537:
       },
       },
       {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 545: Line 543:
           [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 553: Line 551:
       },
       },
       {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 559: Line 557:
           [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 567: Line 565:
       },
       },
       {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 573: Line 571:
           [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 581: Line 579:
       },
       },
       {name: "円形半々(1)",
       {name: "円形半々(1)",
       grid: [
       OLgrid: [
           [false, true, false, true],
           [false, true, false, true],
           [false, true, false, false],
           [false, true, false, false],
Line 587: Line 585:
           [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 595: Line 593:
       },
       },
       {name: "円形半々(2)",
       {name: "円形半々(2)",
       grid: [
       OLgrid: [
           [false, false, true, true],
           [false, false, true, true],
           [true, false, false, true],
           [true, false, false, true],
Line 601: Line 599:
           [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 609: Line 607:
       },
       },
       {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 615: Line 613:
           [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 623: Line 621:
       },
       },
       {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 629: Line 627:
           [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 637: Line 635:
       },
       },
       {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 643: Line 641:
           [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 651: Line 649:
       },
       },
       {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 657: Line 655:
           [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 665: Line 663:
       },
       },
       {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 671: Line 669:
           [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 679: Line 677:
       },
       },
       {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 685: Line 683:
           [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 693: Line 691:
       },
       },
       {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 699: Line 697:
           [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 707: Line 705:
       },
       },
       {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 713: Line 711:
           [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 721: Line 719:
       },
       },
       {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 727: Line 725:
           [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 735: Line 733:
       },
       },
       {name: "四方形半々(1)",
       {name: "四方形半々(1)",
       grid: [
       OLgrid: [
           [true, false, true, false],
           [true, false, true, false],
           [false, false, false, false],
           [false, false, false, false],
Line 741: Line 739:
           [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 749: Line 747:
       },
       },
       {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 755: Line 753:
           [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 763: Line 761:
       },
       },
       {name: "Default",
       {name: "Default",
         grid: [
         OLgrid: [
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
Line 769: Line 767:
           [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 778: Line 776:
     ];
     ];
   
   
     const grid= [
     const OLgrid= [
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
           [false, false, false, false],
Line 785: Line 783:
     ];
     ];
   
   
     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 838: Line 836:
     }
     }
   
   
     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>
  </html></code>
  </html>
 
<noinclude>
[[Category:NOISZ STΔRLIVHT]]
[[Category:NOISZ STΔRLIVHT]]
</noinclude>

Latest revision as of 05:13, 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>
    <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>
Retrieved from "https://anarch.games/noisz/wiki/index.php?title=Widget:DSAF_Overload_Puzzle_Program&oldid=9734"