0

For an experiment I have a webpage where I randomly generate a table of zeros and ones. The participants' task is to count the number of zeros in the table, and they can proceed to the next page only when they get the correct answer (fascinating task, indeed, which is intended to distract people's mind from our main tasks during a few minutes).

Since subjects participate from their own computer, I realized that they might simply copy the table and paste it in a software that can count characters, so that they have the answer automatically without any effort.

I would like to avoid that and make sure that they have to count the number of zeros themselves. I thought of:

  • disabling selection, as in this answer, but that does not prevent users from copying from the code, if I understood correctly: HTML page disable copy/paste

  • generating special zeros and ones that would not be recognized by the usual softwares, but I am worried that special characters would not be displayed correctly on some browsers

Do you have any ideas or suggestions? Thank you.

Oliv
  • 143
  • 7
  • 2
    Try rendering your table in a canvas. The user won't be able to copy text out of an image. – user78403 Jun 16 '18 at 19:58
  • 3
    You'd have to serve the table as a picture or something. I can still parse the HTML of the website to use software, so this won't protect you. That said, even images could be cheated, but that is significantly more effort. – Ingo Bürk Jun 16 '18 at 20:01
  • I think your best method is to generate an image. – Jordan Soltman Jun 16 '18 at 20:04

1 Answers1

0

Thank you for the helpful comments. I had not heard about canvas before and this solution was very appropriate in this case. Here is the code that I am using now to generate a 4x10 matrix with random numbers in a canvas.

Javascript: 

 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 ctx.font = "30px Arial";
 <?php for($i=1;$i<=10;$i++){
      for($j=1;$j<=4;$j++){
        $r=rand(0,1);
        echo "ctx.fillText('$r', -40+$i*50, $j*50);\n";
        }
      }?>

Html: 

    `<canvas id="myCanvas" width="520" height="250" style="border:1px solid #000000;"</canvas>`
Oliv
  • 143
  • 7