<!DOCTYPE html>
<html>
<head>
<style>
body {
margin-left: 35px;
margin-right: 35px;
text-align: left;
}
h2 {
text-align: center;
}
div {
margin-bottom: 4px;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
table td {
border: 1px solid black;
width: 30px;
height: 30px;
text-align: center;
}
button {
margin: 5px;
}
.fixed-cell {
background-color: #dddddd;
}
/* 隐藏规则列表的样式 */
.rule-list {
display: none;
}
/* 答题标签样式 */
#answerLabel {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>小学生思维训练【一年级】</h2>
<div>
<select id="gradeSelect">
<option value="一年级" selected>一年级</option>
<option value="二年级">二年级</option>
<option value="三年级">三年级</option>
<option value="四年级">四年级</option>
<option value="五年级">五年级</option>
<option value="六年级">六年级</option>
</select>
<span>姓名：</span><input type="text" id="nameInput" />
</div>
<div>
<span>题库：</span>
<select id="questionSelect"></select>
</div>
<div>
<button onclick="resetTable()">还原</button>
<button onclick="submitAnswer()">提交</button>
<span id="answerLabel">未答题</span>
</div>
<div>
<h3 onclick="toggleRules()">规则</h3>
<ul class="rule-list">
<li>网格中的不同地方故置了一些“X”和“O”。</li>
<li>用“X”和“O”填满剩余的方格。</li>
<li>每一行、每一列中没有超过两个连续的“X”和“O”。</li>
<li>每一行、每一列中的“X”和“O”数量相同。</li>
<li>每一行以及每一列都是唯一的。</li>
</ul>
</div>
<div id="tableContainer"></div>
<div>
<p>问题和建议，请联系 [email protected]</p>
</div>
<script>
// 题目数组
var tiku = [
[
[0, 0, 0, 0, 0, 1],
[0, 2, 0, 0, 2, 0],
[0, 0, 1, 0, 0, 0],
[0, 2, 0, 0, 0, 2],
[0, 0, 0, 1, 0, 0],
[0, 2, 2, 0, 0, 0],
],
[
[0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0],
[2, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0],
[2, 0, 2, 0, 2, 0],
[2, 0, 0, 0, 2, 0],
],
[
[0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0],
[0, 0, 0, 2, 0, 2],
[0, 1, 1, 0, 0, 0],
[1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
],
[
[0, 0, 2, 0, 2, 0],
[2, 0, 0, 1, 0, 0],
[0, 0, 2, 0, 0, 0],
[0, 0, 0, 0, 1, 0],
[0, 2, 0, 0, 0, 2],
[1, 0, 2, 0, 0, 0],
],
[
[2, 0, 0, 0, 0, 0],
[0, 2, 0, 2, 0, 0],
[0, 0, 1, 2, 0, 2],
[1, 1, 0, 0, 0, 0],
[0, 0, 1, 0, 0, 0],
[0, 0, 0, 2, 0, 0],
],
[
[0, 0, 0, 2, 0, 2],
[0, 0, 0, 2, 0, 2],
[0, 0, 1, 0, 0, 0],
[0, 2, 0, 0, 0, 0],
[1, 0, 0, 0, 2, 0],
[0, 1, 0, 0, 0, 0],
],
[
[0, 2, 0, 2, 0, 0],
[0, 2, 0, 0, 0, 2],
[0, 0, 0, 0, 1, 0],
[0, 1, 0, 0, 0, 0],
[2, 0, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 1],
],
[
[2, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0],
[2, 0, 0, 1, 0, 0],
[0, 0, 0, 0, 2, 0],
[0, 0, 2, 0, 0, 1],
[0, 1, 0, 1, 0, 0],
],
[
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0],
]
];
// 获取存储的年级
var storedGrade = localStorage.getItem('selectedGrade');
var gradeSelect = document.getElementById('gradeSelect');
if (storedGrade) {
gradeSelect.value = storedGrade;
}
// 获取存储的姓名
var storedName = localStorage.getItem('userName');
var nameInput = document.getElementById('nameInput');
if (storedName) {
nameInput.value = storedName;
}
// 获取存储的题目索引
var storedQuestionIndex = localStorage.getItem('selectedQuestionIndex');
var currentQuestionIndex = storedQuestionIndex? parseInt(storedQuestionIndex) : 0;
var tableCellsData = localStorage.getItem('tableCellsData');
var cellsData = tableCellsData? JSON.parse(tableCellsData) : [];
var tableContainer = document.getElementById('tableContainer');
// 初始化题目选择下拉框
function initQuestionSelect() {
var select = document.getElementById('questionSelect');
for (var i = 0; i < tiku.length; i++) {
var option = document.createElement('option');
option.value = i;
option.textContent = i + 1;
if (i === currentQuestionIndex) {
option.selected = true;
}
select.appendChild(option);
}
select.onchange = function () {
currentQuestionIndex = this.value;
localStorage.setItem('selectedQuestionIndex', currentQuestionIndex);
resetTable();
};
}
// 初始化表格
function initTable() {
tableContainer.innerHTML = '';
var currentQuestion = tiku[currentQuestionIndex];
var table = document.createElement('table');
for (var i = 0; i < currentQuestion.length; i++) {
var row = document.createElement('tr');
for (var j = 0, len = currentQuestion[i].length; j < len; j++) {
var cell = document.createElement('td');
var cellValue = currentQuestion[i][j];
if (cellValue!== 0) {
cell.classList.add('fixed-cell');
cell.textContent = getSymbol(cellValue);
} else {
var savedValue = cellsData[currentQuestionIndex] && cellsData[currentQuestionIndex][i] && cellsData[currentQuestionIndex][i][j];
cell.textContent = savedValue || '';
}
cell.onclick = function () {
if (this.classList.contains('fixed-cell')) {
return;
}
if (this.textContent === '') {
this.textContent = 'X';
} else if (this.textContent === 'X') {
this.textContent = 'O';
} else {
this.textContent = '';
}
};
row.appendChild(cell);
}
table.appendChild(row);
}
tableContainer.appendChild(table);
}
// 根据数字获取符号
function getSymbol(num) {
if (num === 0) {
return '';
} else if (num === 1) {
return 'X';
} else {
return 'O';
}
}
// 重置表格
function resetTable() {
initTable();
document.getElementById('answerLabel').textContent = '未答题';
document.getElementById('answerLabel').style.backgroundColor = '#ffffff';
}
// 检查每行每列是否符合规则
function checkRules() {
var currentQuestion = tiku[currentQuestionIndex];
var rows = tableContainer.getElementsByTagName('table')[0].getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
var rowCells = rows[i].getElementsByTagName('td');
var rowXCount = 0;
var rowOCount = 0;
var consecutiveX = 0;
var consecutiveO = 0;
for (var j = 0; j < rowCells.length; j++) {
var cellText = rowCells[j].textContent;
if (cellText === 'X') {
rowXCount++;
consecutiveO = 0;
consecutiveX++;
} else if (cellText === 'O') {
rowOCount++;
consecutiveX = 0;
consecutiveO++;
} else {
consecutiveX = 0;
consecutiveO = 0;
}
if (consecutiveX > 2 || consecutiveO > 2) {
return false;
}
}
if (rowXCount!== rowOCount) {
return false;
}
}
for (var j = 0; j < 6; j++) {
var colXCount = 0;
var colOCount = 0;
var consecutiveX = 0;
var consecutiveO = 0;
for (var i = 0; i < 6; i++) {
var cellText = rows[i].getElementsByTagName('td')[j].textContent;
if (cellText === 'X') {
colXCount++;
consecutiveO = 0;
consecutiveX++;
} else if (cellText === 'O') {
colOCount++;
consecutiveX = 0;
consecutiveO++;
} else {
consecutiveX = 0;
consecutiveO = 0;
}
if (consecutiveX > 2 || consecutiveO > 2) {
return false;
}
}
if (colXCount!== colOCount) {
return false;
}
}
return true;
}
// 提交答案
function submitAnswer() {
if (checkRules()) {
document.getElementById('answerLabel').textContent = '👍恭喜，答对了！';
document.getElementById('answerLabel').style.backgroundColor = '#FFF2CC';
} else {
document.getElementById('answerLabel').textContent = '😭失败，请重新答题！';
document.getElementById('answerLabel').style.backgroundColor = '#FF0000';
}
}
// 切换规则列表的显示状态
function toggleRules() {
var ruleList = document.querySelector('.rule-list');
if (ruleList.style.display === 'none') {
ruleList.style.display = 'block';
} else {
ruleList.style.display = 'none';
}
}
// 保存年级和姓名
gradeSelect.onchange = function () {
localStorage.setItem('selectedGrade', this.value);
};
nameInput.onchange = function () {
localStorage.setItem('userName', this.value);
};
initQuestionSelect();
initTable();
</script>
</body>
</html>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
/* 示例代码 */
body {
text-align: center;
}
i {
color: #777;
}
// 示例代码
console.log("Hello 笔.COOL 控制台")