在JS测验中链接Onsen UI样式

时间:2018-02-11 10:06:01

标签: javascript android frameworks onsen-ui onsen-ui2

我正在使用Onsen UI框架来构建移动应用程序(没有原生,只有HTML5)。我有一个JS测验,其中包括单选按钮以回答问题。此时,答案的按钮和文本样式是“普通标准”,但我想要Onsen UI。

如何在JS中集成Onsen UI框架?

我认为这与这部分有关:

answers.push(
    `<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`

这是完成的测验。

(function() {
function buildQuiz() {
  const output = [];
  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answers = [];
    for (var letter in currentQuestion.answers) {
      answers.push(
        `<label>
    <input type="radio" name="question${questionNumber}" value="${letter}">
    ${letter} :
    ${currentQuestion.answers[letter]}
  </label>`
      );
    }
    output.push(
      `<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>`
    );
  });
  quizContainer.innerHTML = output.join("");
}
const quizContainer = document.getElementById("quiz");
const myQuestions = [{
    question: "Who is the strongest?",
    answers: {
      a: "Superman",
      b: "The Terminator",
      c: "Waluigi, obviously"
    },
    correctAnswer: "c"
  },
  {
    question: "What is the best site ever created?",
    answers: {
      a: "SitePoint",
      b: "Simple Steps Code",
      c: "Trick question; they're both the best"
    },
    correctAnswer: "c"
  },
  {
    question: "Where is Waldo really?",
    answers: {
      a: "Antarctica",
      b: "Exploring the Pacific Ocean",
      c: "Sitting in a tree",
      d: "Minding his own business, so stop asking"
    },
    correctAnswer: "d"
  },
];

0 个答案:

没有答案