Javascript 创建包含无法复制/粘贴的0和1的表

Javascript 创建包含无法复制/粘贴的0和1的表,javascript,html,Javascript,Html,对于一个实验,我有一个网页,我随机生成一个0和1的表格。参与者的任务是计算表中的零数,只有当他们得到正确答案时,他们才能进入下一页(确实是一项有趣的任务,目的是在几分钟内分散人们对主要任务的注意力) 由于受试者是从他们自己的计算机参与的,我意识到他们可能只是简单地复制表格并粘贴到一个可以计数字符的软件中,这样他们就可以不费吹灰之力自动得到答案 我希望避免这种情况,并确保他们必须自己计算零的数量。我想到: 禁用选择,如本答案所示,但如果我理解正确,则不会阻止用户从代码中复制: 生成普通软件无法识

对于一个实验,我有一个网页,我随机生成一个0和1的表格。参与者的任务是计算表中的零数,只有当他们得到正确答案时,他们才能进入下一页(确实是一项有趣的任务,目的是在几分钟内分散人们对主要任务的注意力)

由于受试者是从他们自己的计算机参与的,我意识到他们可能只是简单地复制表格并粘贴到一个可以计数字符的软件中,这样他们就可以不费吹灰之力自动得到答案

我希望避免这种情况,并确保他们必须自己计算零的数量。我想到:

  • 禁用选择,如本答案所示,但如果我理解正确,则不会阻止用户从代码中复制:

  • 生成普通软件无法识别的特殊零和一,但我担心某些浏览器无法正确显示特殊字符


你有什么想法或建议吗?谢谢。

谢谢您的宝贵意见。我以前没有听说过canvas,这个解决方案在这种情况下非常合适。下面是我现在用来在画布中生成带有随机数的4x10矩阵的代码

Javascript:

var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.font=“30px Arial”;

尝试在画布中呈现表格。用户将无法从图像中复制文本。您必须将表格用作图片或其他内容。我仍然可以解析网站的HTML来使用软件,所以这不会保护你。也就是说,即使是图像也可能被欺骗,但这需要付出更多的努力。我认为最好的方法是生成图像。
 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";
        }
      }?>
    `<canvas id="myCanvas" width="520" height="250" style="border:1px solid #000000;"</canvas>`