Django中实现HTML列表元素每次页面加载随机排序的问题咨询

方案1：后端视图层处理（推荐，适合答题类安全场景） #

这个方案在服务端完成打乱逻辑，避免前端篡改答案，可靠性更高：

1. 改造视图层代码，把所有选项整合为列表后打乱再传入模板上下文：

import random

# 你的原有视图逻辑，拿到word_1、word_2、word_3、random_word_to_guess变量后
options = [
    {"value": word_1.Hebrew_word, "type": "incorrect"},
    {"value": word_2.Hebrew_word, "type": "incorrect"},
    {"value": word_3.Hebrew_word, "type": "incorrect"},
    {"value": random_word_to_guess.Hebrew_word, "type": "correct"},
]
# 随机打乱列表顺序
random.shuffle(options)

# 把options加入返回给模板的上下文，比如：
return render(request, "你的模板路径.html", {"options": options})

2. 改造模板代码，循环渲染按钮即可：

<form name="quiz" action="" method="post" class="form-inline">
    {% csrf_token %}
    {% for opt in options %}
    <input name="{{ opt.type }}" type="submit" value="{{ opt.value }}" class="btn btn-primary"/>
    {% endfor %}
</form>

提示：原代码里的类名from-inline是拼写错误，修正为form-inline即可匹配Bootstrap样式，别忘了在form内加{% csrf_token %}避免Django POST请求403报错。

方案2：前端JS处理（改造成本低，适合无安全要求场景） #

如果不想修改后端代码，直接在模板底部加一段JS即可实现打乱：

<script>
window.addEventListener('load', () => {
  const form = document.querySelector('form[name="quiz"]');
  const btnList = Array.from(form.querySelectorAll('input[type="submit"]'));
  // 随机排序
  btnList.sort(() => Math.random() - 0.5);
  // 重新插入DOM
  form.innerHTML = '';
  btnList.forEach(btn => form.appendChild(btn));
})
</script>

注意：该方案依赖JS运行，用户禁用JS时失效，且前端可直接查看DOM区分正确/错误选项，不适合正式答题场景。

内容的提问来源于stack exchange，提问作者user16375265