viresh-ratnakar / exolve

Online interactive crossword software in JavaScript
MIT License
74 stars 15 forks source link

Success / Submit hook #46

Closed lenniebriscoe closed 3 years ago

lenniebriscoe commented 4 years ago

I have a grid with solutions provided and want to know when the user has successfully completed the crossword so I can display some custom markup on the screen (Congratulations! etc).

How can I do this please? either through an event or class etc ?

It would be nice to have a dedicated button that "Submits" without removing errors (appreciate this is similar to submit button when solutions are not provided). The crossword/page could then tell the user there are errors but not tell them where. In other words, keep them guessing. The answer to the above could then be used to give them a "Sorry, you haven't solved it" or a Success message. It might also be nice to have a message within the control that is has a configurable success\failure message

My current attempt is below, which relies on the number of xlv-solved classes being correct

        document.getElementById("xlv1-check-all").addEventListener("click", function() {
            var cluesAcross = document.getElementById('xlv1-across').childNodes.length;
            var cluesDown = document.getElementById('xlv1-down').childNodes.length;

            var solvedClues = document.querySelectorAll("tr.xlv-solved");

            var resultElement = document.getElementById('crosswordResult');
            if(solvedClues.length == (cluesAcross + cluesDown)){
                //Success
                console.log('success');
                resultElement.innerText = "Success! Rearrange the highlighted letters to find the password."
            }
            else {
                //Failure
                console.log('fail');
                resultElement.innerText = "Not quite right yet! Please try again!"
            }
        });

Thanks for your crossword app. Enjoying it.

viresh-ratnakar commented 4 years ago

I can add a "do-not-erase" parameter to the checkAll() function, and you can call it from a button-click handler perhaps?

I just finished pushing a new version, so this will have to wait for the next version. But the change needed is simple. The new checkAll function will look like this (you can replace in your local copy of exolve-m.js and try):

Exolve.prototype.checkAll = function(conf=true, erase=true) {
  if (conf && !confirm(this.textLabels['confirm-check-all'])) {
    this.refocus()
    return false
  }
  let allCorrect = true
  for (let row = 0; row < this.gridHeight; row++) {
    for (let col = 0; col < this.gridWidth; col++) {
      let gridCell = this.grid[row][col]
      if (!gridCell.isLight && !gridCell.isDgmless) {
        continue
      }
      if (gridCell.currLetter == gridCell.solution) {
        continue
      }
      allCorrect = false
      if (!erase) continue
      gridCell.currLetter = '0'
      gridCell.textNode.nodeValue = ''
      if (this.atCurr(row, col)) {
        this.gridInput.value = ''
      }
    }
  }
  if (allCorrect) {
    this.revealAll(false)  // calls updateAndSaveState()
  } else if (erase) {
    for (let ci of this.allClueIndices) {
      this.updateClueState(ci, false, null)
    }
    this.updateAndSaveState()
  }
  this.refocus()
  return allCorrect
}

In customizeExolve(puz), you can save a reference to puz in some variable of yours (say mySavedPuz). Then, when there's a button click on the button that you create, you can test if the solution is correct like this:

if (mySavedPuz.checkAll(false, false)) {
  // Show "Congratulations..etc."
}
viresh-ratnakar commented 4 years ago

FYI: ended up pushing another quick follow-up version to fix a couple of minor things, and included the above changes to checkAll() in that change (v0.93)

viresh-ratnakar commented 3 years ago

Closing out old bugs that I did take some action on. If I haven't fixed every aspect as expected, apologies, but please open a new bug (hard for me to parse out what remains to be fixed).