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;...") |
RiceEmpress (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
<!DOCTYPE html> | |||
<html> | <html> | ||
<head> | <head> | ||
| Line 34: | Line 33: | ||
<nowiki><h1>Lights Out Puzzle</h1></nowiki> | <nowiki><h1>Lights Out Puzzle</h1></nowiki> | ||
<nowiki><div></nowiki> | <nowiki><div align="center"></nowiki> | ||
<label for="quizSelect">Pattern Select:</label> | <label for="quizSelect">Pattern Select:</label> | ||
<select id="quizSelect" onclick="changeQuiz()"> | <select id="quizSelect" onclick="changeQuiz()"> | ||
| 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="gameBoard"></nowiki> | ||
<nowiki><div class="cell" onclick="toggleLights(0, 0)"></div></nowiki> | <nowiki><div class="cell" onclick="toggleLights(0, 0)"></div></nowiki> | ||
<nowiki><div class="cell" onclick="toggleLights(0, 1)"></div></nowiki> | <nowiki><div class="cell" onclick="toggleLights(0, 1)"></div></nowiki> | ||
| Line 869: | Line 867: | ||
</script> | </script> | ||
</body> | </body> | ||
</html>< | </html> | ||
<noinclude> | |||
[[Category:NOISZ STΔRLIVHT]] | [[Category:NOISZ STΔRLIVHT]] | ||
</noinclude> | |||
Revision as of 18:18, 23 November 2025
<!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;
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>
<h1>Lights Out Puzzle</h1>
<div align="center">
<label for="quizSelect">Pattern Select:</label>
<select id="quizSelect" onclick="changeQuiz()">
<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="gameBoard">
<div class="cell" onclick="toggleLights(0, 0)"></div>
<div class="cell" onclick="toggleLights(0, 1)"></div>
<div class="cell" onclick="toggleLights(0, 2)"></div>
<div class="cell" onclick="toggleLights(0, 3)"></div>
<div class="space"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<br>
<div class="cell" onclick="toggleLights(1, 0)"></div>
<div class="cell" onclick="toggleLights(1, 1)"></div>
<div class="cell" onclick="toggleLights(1, 2)"></div>
<div class="cell" onclick="toggleLights(1, 3)"></div>
<div class="space"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<br>
<div class="cell" onclick="toggleLights(2, 0)"></div>
<div class="cell" onclick="toggleLights(2, 1)"></div>
<div class="cell" onclick="toggleLights(2, 2)"></div>
<div class="cell" onclick="toggleLights(2, 3)"></div>
<div class="space"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<br>
<div class="cell" onclick="toggleLights(3, 0)"></div>
<div class="cell" onclick="toggleLights(3, 1)"></div>
<div class="cell" onclick="toggleLights(3, 2)"></div>
<div class="cell" onclick="toggleLights(3, 3)"></div>
<div class="space"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
<div class="answercell"></div>
</div>
<script>
const size = 4;
const quiz = [
{name: "斜め赤4(1)",
grid: [
[false, true, false, false],
[false, false, false, false],
[false, true, false, false],
[false, false, true, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め赤4(2)",
grid: [
[true, false, false, true],
[false, false, false, false],
[false, false, false, false],
[true, false, false, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め赤4(3)",
grid: [
[false, false, false, false],
[false, true, true, false],
[false, true, true, false],
[false, false, false, false]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め赤5(1)",
grid: [
[false, true, false, false],
[false, false, true, false],
[true, true, true, false],
[false, false, false, false]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め赤5(2)",
grid: [
[false, false, true, true],
[false, false, false, false],
[false, false, true, true],
[false, false, false, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め赤7(1)",
grid: [
[false, true, false, true],
[false, true, true, false],
[true, false, true, false],
[false, false, false, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め赤7(2)",
grid: [
[true, true, false, true],
[false, false, true, true],
[false, false, false, false],
[true, false, false, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め半々(1)",
grid: [
[true, true, false, true],
[true, true, false, true],
[false, true, false, false],
[false, true, false, false]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め半々(2)",
grid: [
[true, false, false, true],
[false, false, true, true],
[true, true, true, false],
[false, false, false, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め半々(3)",
grid: [
[true, true, false, true],
[false, false, true, false],
[true, false, true, true],
[false, true, false, false]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め青7(1)",
grid: [
[false, true, true, false],
[false, true, true, true],
[true, false, true, true],
[false, false, true, false]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め青7(2)",
grid: [
[true, true, false, false],
[false, false, true, true],
[true, true, false, true],
[false, true, true, false]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め青7(3)",
grid: [
[true, false, false, true],
[false, false, true, true],
[true, true, false, true],
[false, true, false, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め青5(1)",
grid: [
[true, false, true, true],
[true, true, false, true],
[false, false, false, true],
[true, true, true, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め青5(2)",
grid: [
[true, false, true, false],
[true, false, true, false],
[true, true, false, true],
[true, true, true, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "斜め青5(3)",
grid: [
[true, true, false, false],
[true, false, true, true],
[true, true, false, false],
[true, true, true, true]
],
answergrid: [
[true, true, true, false],
[true, true, false, true],
[true, false, true, true],
[false, true, true, true]
]
},
{name: "縦ボーダー赤3(1)",
grid: [
[false, false, true, false],
[false, false, false, false],
[false, false, false, true],
[true, false, false, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー赤4(1)",
grid: [
[false, false, false, false],
[true, true, false, false],
[false, false, false, true],
[true, false, false, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー赤5(1)",
grid: [
[false, true, false, false],
[false, false, false, false],
[false, false, false, true],
[true, true, true, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー赤7(1)",
grid: [
[false, false, true, true],
[true, false, false, true],
[true, true, false, false],
[true, false, false, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー赤7(2)",
grid: [
[false, false, true, false],
[true, false, false, false],
[true, false, false, true],
[true, true, true, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー赤7(3)",
grid: [
[true, false, false, false],
[true, true, false, true],
[true, false, false, false],
[false, true, false, true]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー半々(1)",
grid: [
[true, false, false, false],
[true, true, false, true],
[true, false, true, true],
[false, false, false, true]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー半々(2)",
grid: [
[false, false, true, false],
[true, false, false, true],
[true, false, true, true],
[true, true, false, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー半々(3)",
grid: [
[false, true, false, true],
[true, false, false, true],
[false, true, true, false],
[false, true, false, true]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー青7(1)",
grid: [
[false, false, false, false],
[false, true, true, true],
[true, true, false, true],
[true, true, false, true]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー青7(2)",
grid: [
[false, false, true, true],
[false, true, true, false],
[true, true, false, false],
[true, true, true, false]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー青7(3)",
grid: [
[true, true, true, false],
[false, true, false, false],
[true, true, true, false],
[false, true, false, true]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "縦ボーダー青7(4)",
grid: [
[false, true, false, true],
[true, true, true, false],
[true, true, false, true],
[false, false, false, true]
],
answergrid: [
[false, true, true, false],
[false, true, true, false],
[false, true, true, false],
[false, true, true, false]
]
},
{name: "円形赤4(1)",
grid: [
[false, false, false, true],
[false, false, true, false],
[false, true, false, false],
[true, false, false, false]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形赤5(1)",
grid: [
[false, true, false, false],
[false, false, true, false],
[true, false, false, false],
[true, false, false, true]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形赤7(1)",
grid: [
[true, false, true, false],
[false, true, true, false],
[false, false, true, true],
[false, false, false, true]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形半々(1)",
grid: [
[false, true, false, true],
[false, true, false, false],
[false, true, true, false],
[true, false, true, true]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形半々(2)",
grid: [
[false, false, true, true],
[true, false, false, true],
[false, true, true, false],
[false, false, true, true]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形青7(1)",
grid: [
[false, true, false, true],
[true, false, false, true],
[true, true, false, false],
[true, true, true, false]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形青5(1)",
grid: [
[true, true, false, true],
[true, true, true, false],
[false, true, true, false],
[true, true, true, false]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "円形青3(1)",
grid: [
[true, true, false, true],
[true, true, true, true],
[true, true, true, false],
[false, true, true, true]
],
answergrid: [
[true, true, true, true],
[true, false, false, true],
[true, false, false, true],
[true, true, true, true]
]
},
{name: "四方形赤4(1)",
grid: [
[false, false, false, true],
[false, false, true, false],
[false, true, false, false],
[true, false, false, false]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形赤4(2)",
grid: [
[false, false, true, true],
[false, true, false, false],
[false, false, false, false],
[false, true, false, false]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形赤5(1)",
grid: [
[false, true, false, false],
[true, false, false, false],
[false, false, false, false],
[false, true, true, true]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形赤5(2)",
grid: [
[false, false, true, true],
[false, false, false, false],
[false, true, false, true],
[true, false, false, false]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形赤7(1)",
grid: [
[true, false, true, true],
[false, false, true, false],
[false, true, true, true],
[false, false, false, false]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形赤7(2)",
grid: [
[true, true, true, false],
[true, false, false, false],
[true, false, false, true],
[false, true, false, false]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形半々(1)",
grid: [
[true, false, true, false],
[false, false, false, false],
[true, true, true, true],
[true, false, true, false]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "四方形青5(1)",
grid: [
[true, true, false, false],
[true, true, true, true],
[true, false, true, false],
[false, true, true, true]
],
answergrid: [
[false, true, true, false],
[true, true, true, true],
[true, true, true, true],
[false, true, true, false]
]
},
{name: "Default",
grid: [
[false, false, false, false],
[false, false, false, false],
[false, false, false, false],
[false, false, false, false]
],
answergrid: [
[true, true, true, true],
[true, true, true, true],
[true, true, true, true],
[true, true, true, true]
]
}
];
const grid= [
[false, false, false, false],
[false, false, false, false],
[false, false, false, false],
[false, false, false, false]
];
let Quiz = quiz[quiz.length-1];
function initializeBoard() {
const gameBoard = document.getElementById("gameBoard");
const cells = gameBoard.getElementsByClassName("cell");
const answercells = gameBoard.getElementsByClassName("answercell");
for (let i = 0; i < cells.length; i++) {
const row = Math.floor(i / size);
const col = i % size;
const cell = cells[i];
cell.style.backgroundColor = grid[row][col] ? "red" : "blue";
cell.style.cursor = "pointer";
const answercell = answercells[i];
answercell.style.backgroundColor = Quiz.answergrid[row][col] ? "red" : "blue";
}
}
function toggleLights(row, col) {
grid[row][col] = !grid[row][col];
if (row > 0) {
grid[row - 1][col] = !grid[row - 1][col];
}
if (row < size - 1) {
grid[row + 1][col] = !grid[row + 1][col];
}
if (col > 0) {
grid[row][col-1] = !grid[row][col-1];
}
if (col < size - 1) {
grid[row][col+1] = !grid[row][col+1];
}
initializeBoard();
checkWin();
}
function checkWin() {
const gameBoard = document.getElementById("gameBoard");
const cells = gameBoard.getElementsByClassName("cell");
for (let i = 0; i < cells.length; i++) {
const row = Math.floor(i / size);
const col = i % size;
if (grid[row][col] !== Quiz.answergrid[row][col]) {
return;
}
}
alert("Congrats!! You solved the puzzle!");
}
function setgrid(){
const cells = gameBoard.getElementsByClassName("cell");
for (let i = 0; i < cells.length; i++) {
const row = Math.floor(i / size);
const col = i % size;
grid[row][col] = Quiz.grid[row][col];
}
}
function changeQuiz() {
const selectElement = document.getElementById("quizSelect");
const selectedQuiz = selectElement.value;
const cells = gameBoard.getElementsByClassName("cell");
if (selectedQuiz === "0") {
Quiz = quiz[Math.floor(Math.random() * (quiz.length-1))];
} else {
Quiz = quiz[selectedQuiz-1];
}
for (let i = 0; i < cells.length; i++) {
const row = Math.floor(i / size);
const col = i % size;
grid[row][col] = Quiz.grid[row][col];
}
setgrid();
initializeBoard();
}
initializeBoard();
</script>
</body>
</html>
