RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 1081016
Accepted
M141
M141
Asked:2020-02-11 15:39:17 +0000 UTC2020-02-11 15:39:17 +0000 UTC 2020-02-11 15:39:17 +0000 UTC

将带有 json 的图像输出到测试中,作为问题的补充

  • 772

问题是除了文本问题之外的图像输出 - “未定义”。每个问题都必须使用 json 显示自己的图像。请帮帮我。结果应该是这样的(这些只是图片:c): 在此处输入图像描述 在此处输入图像描述

<div class="container">
      <div id="loader"></div>
      <div id="game" class="justify-center flex-column hidden">
        <div  id="hud">
          <div id="hud-item">
            <p id="progressText" class="hud-prefix">
              Вопросы
            </p>
            <div id="progressBar">
              <div id="progressBarFull"></div>
            </div>
          </div>
          <div id="hud-item">
            <p class="hud-prefix">
              Очки
            </p>
            <h1 class="hud-main-text" id="score">
              0
            </h1>
          </div>
        </div >
        <h2 id="question">What is the answer to this questions</h2>
        <div id="qImg"></div> <!-- Тут проблема -->
        <div class="choice-container">
          <p class="choice-prefix">А</p>
          <p class="choice-text" data-number="1">Choice 1</p>
        </div>
        <div class="choice-container">
          <p class="choice-prefix">Б</p>
          <p class="choice-text" data-number="2">Choice 2</p>
        </div>
        <div class="choice-container">
          <p class="choice-prefix">В</p>
          <p class="choice-text" data-number="3">Choice 3</p>
        </div>
        <div class="choice-container">
          <p class="choice-prefix">Г</p>
          <p class="choice-text" data-number="4">Choice 4</p>
        </div>
      </div>
    </div>
    <script src="game.js"></script>

[
  {
    "question": "В каких случаях водители привлекаются к уголовной ответственности за нарушения Правил, повлекшие тяжкие последствия?",
    "choice1": "Только при причинении смерти человеку",
    "choice2": "При причинении смерти человеку или тяжкого вреда здоровью человека",
    "choice3": "При наличии пострадавшего (вне зависимости от степени тяжести полученных им повреждений) или причинении крупного материального ущерба",
    "choice4": "Только варианты 2 и 3",
    "answer": 2,
    "imgSrc": "image/1.jpg"
  },
  {
    "question": "Какое расстояние проедет транспортное средство за время, равное среднему времени реакции водителя, при скорости движения около 90 км/час?",
    "choice1": "Примерно 15 м",
    "choice2": "Примерно 25 м",
    "choice3": "Примерно 35 м",
    "choice4": "Примерно 45 м",
    "answer": 2,
    "imgSrc": "image/2.jpg"
  },
  {
    "question": "Какой неподвижный объект, не позволяющий продолжить движение по полосе, не относится к понятию «Препятствие»?",
    "choice1": "Дефект проезжей части",
    "choice2": "Посторонний предмет",
    "choice3": "Неисправное или поврежденное транспортное средство",
    "choice4": "Транспортное средство, остановившееся на этой полосе из-за образования затора",
    "answer": 4,
    "imgSrc": "image/3.png"
  }
]

const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));
const progressText = document.getElementById('progressText');
const scoreText = document.getElementById('score');
const progressBarFull = document.getElementById('progressBarFull');
const loader = document.getElementById('loader');
const qImg = document.getElementById("qImg");
let currentQuestion = {};
let acceptingAnswers = true;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];

let questions = [];

fetch("questions.json")
  .then(res => {
    return res.json();
  })
  .then(loadedQuestions => {
    console.log(loadedQuestions);
    questions = loadedQuestions;
    startGame();
  })
  .catch(err => {
    console.error(err);
  });

qImg.innerHTML = "<img src="+ question.imgSrc +">"; // Тут проблема

//CONSTANTS
const CORRECT_BONUS = 10;
const MAX_QUESTIONS = 3;



startGame = () => {
  questionCounter = 0;
  score = 0;
  availableQuestions = [...questions];
  getNewQuestion();
  game.classList.remove('hidden');
  loader.classList.add('hidden');
};

javascript
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    M141
    2020-02-11T23:53:32Z2020-02-11T23:53:32Z

    明白了,有点困惑,现在一切正常。如果您不深入研究其他细节,这就是答案(如果那样的话,qImg 已被替换)。但是感谢您的评论

    image.innerHTML = "<img src='" + currentQuestion.image + "'>";

    • 0

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    如何从列表中打印最大元素(str 类型)的长度?

    • 2 个回答
  • Marko Smith

    如何在 PyQT5 中清除 QFrame 的内容

    • 1 个回答
  • Marko Smith

    如何将具有特定字符的字符串拆分为两个不同的列表?

    • 2 个回答
  • Marko Smith

    导航栏活动元素

    • 1 个回答
  • Marko Smith

    是否可以将文本放入数组中?[关闭]

    • 1 个回答
  • Marko Smith

    如何一次用多个分隔符拆分字符串?

    • 1 个回答
  • Marko Smith

    如何通过 ClassPath 创建 InputStream?

    • 2 个回答
  • Marko Smith

    在一个查询中连接多个表

    • 1 个回答
  • Marko Smith

    对列表列表中的所有值求和

    • 3 个回答
  • Marko Smith

    如何对齐 string.Format 中的列?

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5