我可能有很多很多的问题,我希望能够批量生成问题框,请重新回答上面的问题
时间: 2024-04-12 12:31:37 浏览: 9
如果你希望批量生成问题框,你可以通过循环来动态生成问题和选项。下面是一个示例代码,可以根据给定的问题数据自动生成问题框:
```javascript
// 定义问题和选项数据
const questions = [
{
question: '你喜欢的颜色是什么?',
options: ['红色', '蓝色', '绿色', '黄色']
},
{
question: '你喜欢的动物是什么?',
options: ['狗', '猫', '兔子', '鸟']
}
];
// 生成问卷HTML
function generateQuestionnaire() {
const form = document.createElement('form');
questions.forEach((q, index) => {
const questionContainer = document.createElement('div');
questionContainer.classList.add('question-container');
const questionText = document.createElement('label');
questionText.textContent = q.question;
const optionsContainer = document.createElement('div');
optionsContainer.classList.add('options-container');
q.options.forEach((option, optionIndex) => {
const optionInput = document.createElement('input');
optionInput.type = 'radio';
optionInput.name = `question-${index}`;
optionInput.id = `option-${index}-${optionIndex}`;
const optionLabel = document.createElement('label');
optionLabel.textContent = option;
optionLabel.htmlFor = `option-${index}-${optionIndex}`;
optionsContainer.appendChild(optionInput);
optionsContainer.appendChild(optionLabel);
});
questionContainer.appendChild(questionText);
questionContainer.appendChild(optionsContainer);
form.appendChild(questionContainer);
});
document.body.appendChild(form);
}
// 调用函数生成问卷
generateQuestionnaire();
```
上述代码中,我们使用了`questions`数组来存储问题和选项的数据。通过遍历`questions`数组,我们可以动态生成对应的问题框和选项框。这样,无论问题的数量有多少,都可以通过批量生成的方式来实现。