This intriguing puzzle exclusively allows lowercase letters.
How can I modify it to accept both upper and lowercase letters?
Alternatively, is there a way to prompt the user to disable caps lock?
HTML
<body onload="initializeScreen()">
<table id="puzzle">
</table>
<input class="butt" type="submit" value="Check" onclick="checkClicked()">
JS
//Setting up the Crossword
function initializeScreen(){
var puzzleTable = document.getElementById("puzzle");
puzzleArrayData = preparepuzzleArray();
for ( var i = 0; i < puzzleArrayData.length ; i++ ) {
var row = puzzleTable.insertRow(-1);
var rowData = puzzleArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
var cell = row.insertCell(-1);
if(rowData[j] != 0){
var txtID = String('txt' + '_' + i + '_' + j);
cell.innerHTML = '<input type="text" class="inputBox" maxlength="1" style="text-transform: uppercase" ' + 'id="' + txtID + '" onfocus="textInputFocus(' + "'" + txtID + "'"+ ')">';
}
}
}
addHint();
}
//Generates Array Data
function preparepuzzleArray(){
var items = [[0, 'f', 0],
['r', 'u', 'n'],
[0, 'n', 0],
];
return items;
}
//Checking function
function checkClicked(){
for ( var i = 0; i < puzzleArrayData.length ; i++ ) {
var rowData = puzzleArrayData[i];
for(var j = 0 ; j < rowData.length ; j++){
if(rowData[j] != 0){
var selectedInputTextElement = document.getElementById('txt' + '_' + i + '_' + j);
if(selectedInputTextElement.value != puzzleArrayData[i][j]){
selectedInputTextElement.style.backgroundColor = 'pink';
}else{
selectedInputTextElement.style.backgroundColor = 'lightgreen';
}
}
}
}
}
Is it feasible to automatically shift focus to the next input once the previous one reaches its maxlength value? I would like this feature as well.