Question

Sign Language Quiz

This app allows the user to test their knowledge of the sign language alphabet. The user enter a text guess based on the image. Then an output of a smiley or frowny face is shown. If the answer is incorrect the correct answer is given.

Do This

Rewrite the checkAnswer function to integrate a parameter so that the selection global variable is no longer necessary.

var letter = getColumn("American Sign Language Alphabet", "Letter");
var sign = getColumn("American Sign Language Alphabet", "Image");
var index;
var selection;

index = randomNumber(0, sign.length-1);
setProperty("signImage", "image",sign[index]);

onEvent("letter_input", "input", function( ) {
selection = getText("letter_input").toUpperCase();
checkAnswer();
});


//TO DO: Rewrite this function to use a parameter so that
// the selection global variable is no longer necessary
function checkAnswer() {
if(selection == letter[index]){
setProperty("smile","hidden",false);
} else{
setProperty("frown","hidden",false);
setProperty("correctionBox","hidden",false);
setText("correctionBox", "The correct answer was: " + letter[index]);
}
}


onEvent("anotherBtn", "click", function( ) {
setProperty("smile","hidden",true);
setProperty("frown","hidden",true);
setProperty("correctionBox","hidden",true);
setText("letter_input", "");
index = randomNumber(0, sign.length-1);
setProperty("signImage", "image",sign[index]);
});

Answer 1

To refactor the `checkAnswer` function so that it uses a parameter (thus eliminating the need for the global `selection` variable), you can modify the function definition to accept the user's input directly. Below is the updated code:

```javascript
var letter = getColumn("American Sign Language Alphabet", "Letter");
var sign = getColumn("American Sign Language Alphabet", "Image");
var index;

index = randomNumber(0, sign.length-1);
setProperty("signImage", "image", sign[index]);

onEvent("letter_input", "input", function() {
var selection = getText("letter_input").toUpperCase();
checkAnswer(selection);
});

// Updated checkAnswer function to accept a parameter
function checkAnswer(userSelection) {
if (userSelection === letter[index]) {
setProperty("smile", "hidden", false);
} else {
setProperty("frown", "hidden", false);
setProperty("correctionBox", "hidden", false);
setText("correctionBox", "The correct answer was: " + letter[index]);
}
}

onEvent("anotherBtn", "click", function() {
setProperty("smile", "hidden", true);
setProperty("frown", "hidden", true);
setProperty("correctionBox", "hidden", true);
setText("letter_input", "");
index = randomNumber(0, sign.length - 1);
setProperty("signImage", "image", sign[index]);
});
```

### Changes made:
1. Removed the global `selection` variable.
2. Changed the `checkAnswer` function to accept a parameter called `userSelection`.
3. Updated the event handler for the `letter_input` to call `checkAnswer` with the current input value as the argument.

This design keeps the function self-contained and reduces dependence on global variables, making the code cleaner and easier to maintain.