import React,{Component} from ‘react’;
import ‘…/App.css’;
function task2(x){
let divStyle = {};
console.log(“x=”,x)
x===0?divStyle = {
position:‘relative’,
left: ‘43%’,
top: ‘5%’,
display: ‘block’ ,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
}:x===1?divStyle = {
position:‘relative’,
left:‘43%’,
top: ‘75%’,
display: ‘block’,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
}:x===2?divStyle = {
position:‘relative’,
left:‘5%’,
top: ‘43%’,
display: ‘block’,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
}:divStyle = {
position:‘relative’,
left:‘75%’,
top: ‘43%’,
display: ‘block’,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
};
console.log(divStyle);
return (
}
function task(){
var x = Math.floor(Math.random()*16)%4;
switch(x){
case 0:
console.log("0");
task2(x);
document.onkeydown = function(event) {
if(event.keyCode===38)
{
console.log("correct key")
const audioEl = document.getElementsByClassName("audio-element1")[0]
audioEl.play()
task();
}
else
{
console.log("wrong key");
const audioEl = document.getElementsByClassName("audio-element2")[0]
audioEl.play()
task();
}
}
break;
case 1:
console.log("1");
task2(x);
document.onkeydown = function(event) {
if(event.keyCode===40)
{
console.log("correct key")
const audioEl = document.getElementsByClassName("audio-element1")[0]
audioEl.play()
task();
}
else
{
console.log("wrong key");
const audioEl = document.getElementsByClassName("audio-element2")[0]
audioEl.play()
task();
}
}
break;
case 2:
console.log("2");
task2(x);
document.onkeydown = function(event) {
if(event.keyCode===37)
{
console.log("correct key")
const audioEl = document.getElementsByClassName("audio-element1")[0]
audioEl.play()
task();
}
else
{
console.log("wrong key");
const audioEl = document.getElementsByClassName("audio-element2")[0]
audioEl.play()
task();
}
}
break;
case 3:
task2(x);
console.log("3");
document.onkeydown = function(event) {
if(event.keyCode===39)
{
console.log("correct key")
const audioEl = document.getElementsByClassName("audio-element1")[0]
audioEl.play()
task();
}
else
{
console.log("wrong key");
const audioEl = document.getElementsByClassName("audio-element2")[0]
audioEl.play()
task();
}
}
break;
default:
console.log("failure");
}
}
class ShiftingVergence extends Component{
render(){
return(
<div>
<div className="software-background1 m-5">
<div className="shiftingVergence-background">
{
task()
}
</div>
</div>
<audio className="audio-element1">
<source src="../assets/sounds/beepcorrect.mp3"></source>
<source src="../assets/sounds/beepcorrect.ogg"></source>
</audio>
<audio className="audio-element2">
<source src="../assets/sounds/beepincorrect.mp3"></source>
<source src="../assets/sounds/beepincorrect.ogg"></source>
</audio>
</div>
);
}
}
export default ShiftingVergence;