Javascript Aframe-选择随机实体（从3个选项中）并设置属性

编辑：多亏了Piotr的帮助，这是一个很好的例子。它从一个JSON数组中获取两个随机标题，并且一次只显示一个标题（通过随机选择过程）。然后，如果用户单击框中正确图像的标题，字体将变为绿色，否则，如果用户单击与图像不匹配的游戏标题，文本将变为红色。太棒了。下面是一些代码

  AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var url = 'json/text.json';
    var parentEL = this.el;

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var game = JSON.parse( event.target.response )
      var keys = Object.keys(game);
      var random = game[keys.length * Math.random() << 0];
      var trivia = random.Title
      var game2 = JSON.parse( event.target.response )
      var keys2 = Object.keys(game);
      var random2 = game[keys.length * Math.random() << 0];
      var trivia2 = random2.Title
      var textEntity = document.querySelector('#text');
      var gurl = random.Imageurl
      var sceneEl = document.querySelector('a-scene');
      sceneEl.querySelector('a-box').setAttribute('material', {src:gurl}); 
      textEntity.setAttribute("visible", "false")       

    let visibleRandom = Math.floor(Math.random() * 3); // THIS ELEMENT WILL BE VISIBLE
    let anwserRandom = Math.floor(Math.random() * 3); // THIS IS THE ELEMENT WITH THE CORRECT OPTION

  let children = Array.from(parentEL.children); 
  children.forEach((el, index) => {

if (index == visibleRandom) {
  el.setAttribute("visible", "true")
  el.setAttribute("value", trivia2)

} else {
  el.setAttribute("visible", "false")
}
if (index == anwserRandom) {
  el.setAttribute("value", trivia)
} 
 el.addEventListener("click", (e) => {
  if(el.getAttribute("value") == trivia) {
    el.setAttribute("color", "green")
  } else {
    el.setAttribute("color", "red")
  }
});
});
});
    request.send( null );
  }
});

---

期待着看看是否有解决办法。到目前为止，我已经学会了如何编写代码来设置对象的位置，但这似乎有点复杂。

这里有一些技巧。让我解释一下如何做“测验”部分，我想它也会解释可见性

这可能不是最好的解决方案，但它很好。 让我们在一个空实体中有三个选项。父级将处理逻辑

<a-entity logic>
  <a-box position="0 0 1></a-box>
  <a-box position="0 0 0></a-box>
  <a-box position="0 0 -1></a-box>
</a-entity>

现在，让我们为他们提供事件侦听器，我们在其中检查单击了哪个框：

children.forEach((el, index) => {
    el.addEventListener("click", (e) => {
      if (index == anwser) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
});

所以，我有一个框，我有一个随机的anwser，如果点击了anwser，框就会变成绿色

此外，如果在其中放置

el.setAttribute（'visibility'，'false'）

---

在我的网站上查看。anwser在控制台中打印

更新

如果您已经有一个来自JSON.parse的anwser，只需检查它是否符合可见实体：

children.forEach((el, index) => {
    if (index == anwser) {
      el.setAttribute("visible", "true")
    } else {
      el.setAttribute("visible", "false")
    }
    el.addEventListener("click", (e) => {
      if(el.getAttribute("value") == option1) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
    });
}

---

查看更新的。

非常感谢，我正忙着想办法解决这个问题。我真的很感激你以一种新的人可以学习的方式一步一步地分解它，所以再次感谢你。我会让你知道我什么时候能让它工作。@Piotre我的答案（选项1）来自JSON解析，这会对应用你的解决方案产生影响吗？示例@DarioSilva不检查数字，您可以检查

中的文本？我无法应用此代码。你知道我不是在寻找生成随机答案的代码，对吗？（我已经有了一套答案，我想保留以前的JSON.parse）。@DarioSilva我已经更新了我的anwser。提供的代码使随机选项可见，并根据JSON.parse（称为option1）使其变为红色/绿色
children.forEach((el, index) => {
    el.addEventListener("click", (e) => {
      if (index == anwser) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
});

children.forEach((el, index) => {
    if (index == anwser) {
      el.setAttribute("visible", "true")
    } else {
      el.setAttribute("visible", "false")
    }
    el.addEventListener("click", (e) => {
      if(el.getAttribute("value") == option1) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
    });
}