Question

我创建了一个包含单选按钮的测验应用程序，但我希望单选按钮以垂直线显示，并在其周围显示框。我尝试通过调用选项ID来执行此操作，但它不起作用。

我希望它看起来如何：

而不是：

 var quiz = [{
          "question": "What is the full form of IP?",
          "choices": ["Internet Provider", "Internet Port", "Internet Protocol" , "Other"],
          "correct": "Other"
        }, {
          "question": "Who is the founder of Microsoft?",
          "choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak" , "Martin Shaba"],
          "correct": "Bill Gates"
        }, {
          "question": "What was your first dream?",
          "choices": ["8 bits", "64 bits", "1024 bits"],
          "correct": "8 bits"
        }, {
          "question": "The C programming language was developed by?",
          "choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
          "correct": "Dennis Ritchie"
        }, {
          "question": "What does CC mean in emails?",
          "choices": ["Carbon Copy", "Creative Commons", "other"],
          "correct": "Carbon Copy"
        }];


// define elements
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");

// init vars
var currentQuestion = 0,
score = 0,
askingQuestion = true;

function $(id) { // shortcut for document.getElementById
  return document.getElementById(id);
}

function askQuestion() {
  var choices = quiz[currentQuestion].choices,
  choicesHtml = "";

  // loop through choices, and create radio buttons
  for (var i = 0; i < choices.length; i++) {
    choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
    "' id='choice" + (i + 1) +
    "' value='" + choices[i] + "'>" +
    " <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
  }

  // load the question
  questionContainer.textContent = quiz[currentQuestion].question;

  // load the choices
  choicesContainer.innerHTML = choicesHtml;

  // setup for the first time
  if (currentQuestion === 0) {
    scoreContainer.textContent = "0 correct out of " +
    quiz.length + "";
   // submitBtn.textContent = "Submit Answer";
  }

  var radios = document.querySelectorAll('input[type=radio]');
  [].forEach.call(radios, function(radio) {
    radio.onchange = function() {
      checkAnswer();
    }
  })   
}

function checkAnswer() {
  // are we asking a question, or proceeding to next question?
  if (askingQuestion) {
   // submitBtn.textContent = "Next Question";
    askingQuestion = false;

    // determine which radio button they clicked
    var userpick,
    correctIndex,
    radios = document.getElementsByName("quiz" + currentQuestion);
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].checked) { // if this radio button is checked
        userpick = radios[i].value;
      }

      // get index of correct answer
      if (radios[i].value == quiz[currentQuestion].correct) {
        correctIndex = i;
      }
    }

    // setup if they got it right, or wrong

    if (userpick == quiz[currentQuestion].correct) {
      score++;
    } else {
    }

    scoreContainer.textContent = "" + score + " correct out of " +
    quiz.length + "";


    askingQuestion = true;
    // change button text back to "Submit Answer"
    //submitBtn.textContent = "Submit Answer";
    // if we're not on last question, increase question number
    if (currentQuestion < quiz.length - 1) {
      currentQuestion++;
      askQuestion();
    } else {
      showFinalResults();
    }
  } else { 
  }
}

function showFinalResults() {
  content.innerHTML = "<h1>You did amazing!</h1>" +
  "<h5>Below are your results</h5>" +
  "<h2>" + score + " out of " + quiz.length + " questions, " +
  Math.round(score / quiz.length * 100) + "%<h2>";
}

window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);

CSS：

#container {
  max-width:600px;
  height: auto;
  background: #59C1DA;
  border: 10px solid #333;
  border-radius: 5px;
  margin: auto;
  text-align: center;
}

    #content {
      border: 10px solid #fff;
      padding: 15px;
      color: #fff;
    #question {
      font-weight: bold;
    }
    #score {
      margin-top: 20px;
      font-weight: bold;
    }

按钮不居中：

Answer 1

您只能使用CSS在当前的HTML结构中执行此操作。这是一个例子：

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  border: 5px solid lightblue;
  background-color: lightblue;
  cursor: pointer;
  display: block;
  height: 40px;
  width: 200px;
  text-align: center;
  line-height: 40px;
}
input[type="radio"]:checked + label {
  border: 5px solid blue;
  background-color: dodgerblue;
}

<input id="banana" type='radio' name="quiz" value="banana">
<label for="banana">Banana</label>
<input id="apple" type='radio' name="quiz" value="apple">
<label for="apple">Apple</label>
<input id="strawberry" type='radio' name="quiz" value="strawberry">
<label for="strawberry">Strawberry</label>
<input id="orange" type='radio' name="quiz" value="orange">
<label for="orange">Orange</label>

Answer 2

没有时间编写代码，我只是尝试解释这个想法：

创建带有div和文本的desidered表单，好像没有复选框应该存在并用js实现行为

在每个div的onClick上，更改css类添加＆＃34;选择＆＃34;，或者删除它（如果存在）（这意味着它已被选中）

为单一选择实施行为不远

因此您可以为所选项目设置不同的外观。

单一选择提示（一次选择）：在onClick中，如果div已经被选中＆＃34;，则删除该类而不删除任何其他内容（如果你想允许＆＃34;没有选择＆＃34;模式或者什么都不做而不是＃34;）;否则从所有选择中移除＆＃34;选择＆＃34;类并将其添加到onClick的目标。

myDiv.onclick = function(e) {
    if (e.target.classList.contains("selected")) {
        e.target.classList.remove("selected");
    } else {
        for (var i = 0; i < myChoicedivArray.length; i++) {
            myChoicedivArray.classList.remove("selected");
        }
        e.target.classList.add("selected");
    }
    //other onclick code here
}

免责声明：我没有测试过该代码，只是为了提出一个想法

这就是全部。

单选按钮样式与JavaScript

2 个答案: