javascript - 使用跨度，其他文本在下一行

Question

我有两个跨度的文本，但它们并不相邻。 (最后一段文字在前面一段文字的下面，但应该在前面一段文字的旁边。)

这是打印文本的代码:

var display_options_1 = `

         <td><span id="A${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[0]}</span><span>${question.option_text[0]}</span></td>
         <td><span id="B${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[1]}</span><span>${question.option_text[1]}</span></td>`;

var display_options_2 = `

         <td><span id="C${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[2]}</span><span>${question.option_text[2]}</span></td>
         <td><span id="D${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[3]}</span><span>${question.option_text[3]}</td>`;

这是 full code有一个工作Demo !

It was easier to solve the problem with one <span>,

<span id="C${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[ ]}

${question.option_text[ ]}

, but I need only ${question.options[]} to be selected not ${question.option_text[ ]}

Answer 1

改变这些行

<td><span id="A${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[0]}</span><span>${question.option_text[0]}
<td><span id="B${i}" class="${question.questionId}" onclick="onSelect(event)">${question.options[1]}</span><span>${question.option_text[1]}

这些

<td><span onclick="onSelect(event)" class="${question.questionId}" ><span id="A${i}" >${question.options[0]}</span><span>${question.option_text[0]}</span></span>
<td><span onclick="onSelect(event)" class="${question.questionId}"><span id="B${i}"  >${question.options[1]}</span><span>${question.option_text[1]}</span></span>

在 .question1 上删除 width: 90%

在选择的第一个 child 上添加锁定/正确/不正确的类，例如

selection.firstElementChild.setAttribute('class', 'locked');

同时更改检查正确答案的行

if (currentQuestion.answer === e.currentTarget.firstElementChild.innerText) {

var x;

var questions = [{
  questionId: "question1",
  answerId: "C",
  question: "1) जो भवनों में रहते हैं, वे है ?(C186506)",
  options: ["A)", "B)", "C)", "D)"],
  option_text: ["ज्योतिष्क ", "वैमानिक", "भवनपति ", "व्यंतर"],
  answer: "C)",
  locked: false
}];

var table = document.getElementById("test");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.colSpan = 2;
var i = 0;


function generateQuestion(question) {
  // noinspection JSAnnotator
  i += 1;
  var newQuestion = `
        
            <td colspan="2"><div class="question1" style="justify-content: center; width: 100%;">${question.question}`;
  var display_options_1 = `
	
            <td><span onclick="onSelect(event)" class="${question.questionId}" ><span id="A${i}" >${question.options[0]}</span><span>${question.option_text[0]}</span></span>
            <td><span onclick="onSelect(event)" class="${question.questionId}"><span id="B${i}"  >${question.options[1]}</span><span>${question.option_text[1]}</span></span>
		`;
  var display_options_2 = `
	
            <td><span onclick="onSelect(event)" class="${question.questionId}" ><span id="C${i}" >${question.options[2]}</span><span>${question.option_text[2]}</span></span>
            <td><span   onclick="onSelect(event)" class="${question.questionId}"><span id="D${i}">${question.options[3]}</span><span>${question.option_text[3]}</span></span>
		`;
  var row2 = table.insertRow(1);
  row2.innerHTML = newQuestion;

  var row3 = table.insertRow(2);
  setTimeout(() => {
    row3.innerHTML = display_options_1;
  }, 2000);
  var row4 = table.insertRow(3);
  setTimeout(function() {
    row4.innerHTML = display_options_2;
  }, 2000);

  var points_display = "1";
  var points_set = "237512";
  var t_points = "237513";
  var distance = "10";
}

function onSelect(e) {
  var selection = e.currentTarget;
  var questionId = e.currentTarget.className;
  var currentQuestion = questions.find(function(q) {
    return q.questionId == questionId;
  });



  if (currentQuestion.locked) {
    alert("Question already answered");
  } else if (currentQuestion.answer === e.currentTarget.firstElementChild.innerText) {
    clearInterval(x);

    //table.deleteRow(0);
    //document.getElementById("timer").setAttribute('class', 'hidden_timer');
    selection.firstElementChild.setAttribute('class', 'locked');
    alert("Correct!!!");
    currentQuestion.locked = true;
    setTimeout(() => {
      selection.setAttribute('class', 'correct');
    }, 2000);

  } else {
    alert("Incorrect...");
    clearInterval(x);
    //table.deleteRow(0);
    //document.getElementById("timer").setAttribute('class', 'hidden_timer');
    selection.firstElementChild.setAttribute('class', 'locked');
    currentQuestion.locked = true;
    setTimeout(() => {
      selection.firstElementChild.setAttribute('class', 'incorrect');
      console.log(document.getElementById(currentQuestion.answerId + i));
      document.getElementById(currentQuestion.answerId + i).setAttribute('class', 'correct');
    }, 2000);
  }
  //generateQuestion(questions[i]);
}

function startTest() {
  generateQuestion(questions[i]);
}

.correct {
  display: flex;
  align-items: center;
  width: 90%;
  height: auto;
  min-height: 40px;
  position: relative;
  background: green;
  color: white;
}

.correct::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid green;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.correct::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid green;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.lifeline {
  background-color: pink;
  color: white;
}

.incorrect {
  display: flex;
  align-items: center;
  width: 90%;
  height: auto;
  min-height: 40px;
  position: relative;
  background: red;
  color: white;
}

.incorrect::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.incorrect::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.locked {
  display: flex;
  align-items: center;
  width: 90%;
  height: auto;
  min-height: 40px;
  position: relative;
  background: yellow;
  color: white;
}

.locked::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid yellow;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.locked::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid yellow;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.timeout {
  background-color: orange;
  color: white;
}

.hidden_timer {
  visibility: hidden;
  display: none;
}

.visible {
  visibility: visible !important
}

.timeout {
  display: flex;
  align-items: center;
  width: 90%;
  height: auto;
  min-height: 40px;
  position: relative;
  background: orange;
  color: white;
}

.timeout::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid orange;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.timeout::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid orange;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.question1 {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 40px;
  position: relative;
  background: blue;
  color: white;
}

.question1::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.question1::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 20px solid blue;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.table_cstm {
  border-collapse: separate;
  border-spacing: 15;
  /* Apply cell spacing */
  table-layout: fixed
}

td:last-child div {
  margin-left: auto;
}


/* Play header starts */

.button_cstm_quit {
  background-color: red;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.button_cstm_quit:hover {
  color: red;
  font-weight: bold;
  background: none;
  border: 2px solid red;
}

.button_cstm_ll {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
}

.button_cstm_ll:hover {
  color: blue;
  font-weight: bold;
  background: none;
  border: 2px solid blue;
}

.button_cst_pnts {
  background-color: orange;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
}

.button_cst_pnt:hover {
  color: orange;
  font-weight: bold;
  background: none;
  border: 2px solid orange;
}

.button_cstm_nxt {
  background-color: blue;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
}

.button_cstm_nxt:hover {
  color: blue;
  font-weight: bold;
  background: none;
  border: 2px solid blue;
}

.button_cstm_time {
  background-color: #FF8C00;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 35px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50%;
}

.button_cstm_time:hover {
  color: #FF8C00;
  font-weight: bold;
  background: none;
  border: 2px solid #FF8C00;
}

#container_cstm {
  width: 100%;
}

#left_cstm {
  float: left;
  width: 100px;
}

#right_cstm {
  float: right;
  width: 100px;
}

#center_cstm {
  margin: 0 auto;
  width: 100px;
}

#play_head {
  display: flex;
  /* establish flex container */
  flex-direction: row;
  /* default value; can be omitted */
  flex-wrap: nowrap;
  /* default value; can be omitted */
  justify-content: space-between;
  /* switched from default (flex-start, see below) */
}

.red_cross:before,
.red_cross:after {
  position: absolute;
  content: '';
  top: -5px;
  bottom: -5px;
  width: 5px;
  background: #ff0000;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.red_cross:before {
  transform: skew(30deg);
}

.red_cross:after {
  transform: skew(-30deg);
}

.disp_none {
  display: none;
}


/* Play header ends */

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

<body onload="startTest()">


  <div class="container">
    <table id="test" class="table table-responsive table_cstm" cellspacing="100">

    </table>

</html>