javascript - 移动端开发做习题类型的开发模式？

Question

大家好，有这样一个问题。 就是在移动端开发做试题的应用，因为主要在移动端，所以只能一次显示一道题目，做完再显示下一道题目。 我现在是这样实现的，就是在后台取出所有题目数据嵌入到模板里，然后循环输出，这样也就导致页面上有很多个 Form表单。做一些提交、验证等问题比较麻烦。 请问大家有什么其它的方式、模式 开发这类应用。 多谢大家指教！

Answer 1

我把你的问题分析了下 给出了下面的方案 不知道是不是你想要的

<p class="que">
<ul>
    <li>
        题目1
        <button>下一题</button>
    </li>
    <li>
        题目2
        <button>下一题</button>
    </li>
    <li>
        题目3
        <button>下一题</button>
    </li>
    <li>
        题目4
        <button>下一题</button>
    </li>
    <li>
        题目5
        <button>下一题</button>
    </li>
    <li>
        题目6
        <button>提交</button>
    </li>
</ul>

样式:

<style>
li{ float: left;}

</style>

用js控制

$(function(){
var win_width=$(window).width();
var win_height=$(window).height();//获取屏幕宽高度
$(".que").css({"width":win_width,"height":win_height});
$(".que ul").css({"width":win_width,"height":win_height});
$(".que ul li").css({"width":win_width,"height":win_height});

})

上面把基本样式都设置好了 你再优化下
然后用ajax把问题都抽出来放在每个li里面
每次只显示一个问题
当答完了之后就点击下一题
点击的的时候触发两次事件：
1.把回答的问题存到一个定义的数组里面
2.滑动到下一题
到最后一题的时候点击提交
将添加到数组的所有答案按照你自己的处理机制反馈

Answer 2

如果追求流畅的用户体验，可以把逻辑全部放在前端。只是题目的原始数据从后端取过来。可以试试angular之类的mvvm或mvc框架。