1

単語の色がその意味的な意味と一致しない場合、人が正しい色を選択するのに時間がかかることを示すストループ効果を示すために、JavaScript Web ページを作成しています。たとえば、青色の RED という単語が表示されている場合は、「青色」ボタンをクリックします。

ただし、色と単語はランダムに生成されるため、それらを新しい配列に格納して比較する方法がわかりません。

実験の最後に、アラートが欲しいです。10問中「RED in blue」の場合は「DIFF」、「RED in red」の場合は「SAME」と表示されます。手伝ってくれてありがとう！私は以下のようなコードを持っています

<html>

<head>


<title> random text </title>

<script type="text/javascript"> 



//array 

var quotations = new Array();

quotations[0]= "red";
quotations[1]= "yellow";
quotations[2]= "green";
quotations[3]= "blue";

var colours = new Array();

colours[0] = "red";
colours[1] = "yellow";
colours[2] = "green";
colours[3] = "blue";

//Randomize coloured text 9 times and on tenth time, display alert


var NumberAttempts = 0;

var choice;

var score =0;

function display()
{

 if ( NumberAttempts < 10) 

 { 

  var a = Math.floor(Math.random()*quotations.length)document.getElementById ("txtbox").value=quotations[a];


  choice = Math.floor(Math.random()*colours.length);document.getElementById    ("txtbox").style.color=colours[choice];


  NumberAttempts++;


 }

  else

 {

  alert ("You are done! The number of correct attempts is " + score + ".");

 }
}

function compare(c1)
{
 if (colours[choice]==c1)
  {
   score++;    
  }
}
</script>
</head>
<body>
<h1><center>Using Computer Science to Demonstrate the Stroop Effect</center></h1>
<div>
<ul>
<li><a href="http://introduction.html" target="_blank"> Introduction </a></li>
<li><a href="http://instructions.html" target="_blank"> Instructions </a></li>
</ul>

<textarea id="txtbox" style="width:600px;"></textarea><br />

<button onClick='compare("red");display()'><font color="red">Red </font></button>

<button onClick='compare("yellow");display()'><font color="yellow">Yellow</font></button>

<button onClick='compare("green");display()'><font color="green">Green</font></button>

<button onClick='compare("blue");display()'><font color="blue">Blue</font></button>



</body>

</html>
4

1 に答える 1

0 
<html>

<head>


<title> random text </title>

<script type="text/javascript"> 

window.onload=display;

//array 

var quotations = new Array();

quotations[0]= "red";
quotations[1]= "yellow";
quotations[2]= "green";
quotations[3]= "blue";

var colours = new Array();

colours[0] = "red";
colours[1] = "yellow";
colours[2] = "green";
colours[3] = "blue";

//Randomize coloured text 9 times and on tenth time, display alert

var arr=new Array(10,1);
x=0;
y=0;
var NumberAttempts = 0;

var choice;

var score =0;

function display()
{

 if ( NumberAttempts < 10) 

 { 

  var a = Math.floor(Math.random()*quotations.length);
  document.getElementById("txtbox").value=quotations[a];


  choice = Math.floor(Math.random()*colours.length);
  document.getElementById("txtbox").style.color=colours[choice];
    arr[x,0]=colours[choice];
    arr[x,1]=quotations[a];
    x=x+1;
    console.log(arr);

  NumberAttempts++;


 }

  else

 {

  alert ("You are done! The number of correct attempts is " + score + ".");


 }
}

function compare(c1)
{
 if (colours[choice]==c1)
  {
   score++;

  }

}
</script>
</head>
<body>
<h1><center>Using Computer Science to Demonstrate the Stroop Effect</center></h1>
<div>
<ul>
<li><a href="http://introduction.html" target="_blank"> Introduction </a></li>
<li><a href="http://instructions.html" target="_blank"> Instructions </a></li>
</ul>

<textarea id="txtbox" style="width:600px;"></textarea><br />

<button onClick="compare(this.id);display()" id="red"><font color="red">Red </font></button>

<button onClick="compare(this.id);display()" id="yellow"><font color="yellow">Yellow</font></button>

<button onClick="compare(this.id);display()" id="green"><font color="green">Green</font></button>

<button onClick="compare(this.id);display()" id="blue"><font color="blue">Blue</font></button>



</body>

</html>
于 2012-11-18T05:40:09.620 に答える