Yesterday I asked a question and, "with a little help from my friends" got my little javascript working.
This one:
<script type="text/javascript" >
function paint_cells() {
var tds = document.querySelectorAll('tbody td'), i;
for(i = 0; i < tds.length; i += 3) {
if(tds[i+1].textContent != tds[i+2].textContent){
tds[i+2].bgColor = "red";
}
}
}
paint_cells();
</script>
Now I would like to tweak this to cater for multiple correct answers. For example, both 'don't hurry' or 'do not hurry' are correct. In my MySQL table, they are stored as a string like this:
don't hurry|do not hurry
I want to split the string on | and then check if the student's answer is in the array (same as I do in PHP when marking the answers).
Not all answers have multiple correct answers. I hope that is not a problem for .split()??
I tried this, but I am not getting the result I want. Can you please help me tweak this to give me the result I want?
Edit: I thought maybe the apostrophes were causing the problem, so I escaped them. I trimmed each variable. But I still don't get what I want! Any tips please?
<script type="text/javascript" >
function paint_cells() {
var tds = document.querySelectorAll('tbody td'), i;
for(i = 0; i < tds.length; i += 3) {
var arr = tds[i+1].textContent.split('|');
for(j = 0; j < arr.length; j++) {
arr[j].trim();
arr[j].replace(/'/g, "\'");
}
var myvar = tds[i+2].textContent;
myvar.trim();
myvar.replace(/'/g, "\'");
//console.log("Your line would be here")//Prints a line on the console
if(!arr.includes(myvar)){
//if(arr[0] != myvar){
alert('Array length: ' + arr.length + ' Answers: ' + tds[i+1].textContent + ' Student answer:' + myvar);
tds[i+2].bgColor = "red";
}
}
}
paint_cells();
</script>
Quotes don't matter. You have to reset the array to the trimmed value... trim returns the modified value, it doesn't "change in place".
var arr = answers.split('|');
for(var ii=0; ii<arr.length; ii++){
arr[ii] = arr[ii].trim().toLowerCase();
}
Here's a working example (run code snippet below):
function paint_cells() {
var tds = document.querySelectorAll('tbody td');
for (var i = 0; i < tds.length; i += 3) {
var cell_1 = tds[i + 1];
var cell_2 = tds[i + 2];
var answers = cell_1.textContent;
var arr = answers.split('|');
for (var ii = 0; ii < arr.length; ii++) {
arr[ii] = arr[ii].trim().toLowerCase();
}
var guess = (cell_2.textContent || "").trim().toLowerCase();
//console.log("Your line would be here")//Prints a line on the console
if (arr.indexOf(guess) < 0) {
console.log('Array length: ' + arr.length + ' Answers: ' + answers + ' Student answer:' + cell_2.textContent);
cell_2.style.backgroundColor = "red";
}
}
}
paint_cells()<table>
<tbody>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>do not hurry</td>
</tr>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>don't hurry</td>
</tr>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>abc</td>
</tr>
<tr>
<td></td>
<td>don't hurry|do not hurry</td>
<td>xyz</td>
</tr>
</tbody>
</table>