巧用字符串、数组的方法动态生成答题系统

最近遇到一个项目，做一个小的答题功能 需求如下：

请求的返回的数据是一个字符串: 这个字符串中用分号分隔题目.

每一个题目中使用 | 分隔题干 与 答案选项. 以及正确答案.

（注 此处以 responseText 来模拟已经从服务器返回答题数据）

解决方案如下：

<div id="dv"></div>
    <script>
        var responseText = '吃冰淇淋不解渴主要是因为它: |含蛋白质|含脂肪|含糖|含有机物|2;下列哪项是人体的造血器官: |心脏|骨髓|肾脏|肌肉|1';

        var questions = [];
        responseText.split(';').forEach(function(question){
            var tempArray = question.split('|');
            //第0个是问题 最后一个是打印 中间的是选项
            var item = {};
            // 删除数组中的第一个值 并且获取返回的被删除的值
            item.title = tempArray.shift();
            //删除数组中的最后一个值 并且获取返回的被删除的值
            item.answer = tempArray.pop();
            //数组中剩下的数据就只剩下选项
            item.options = tempArray;
            //将对象item 添加到 数组 questions中
            questions.push(item);
        })

        //封装一个工具集
        var utils = {
            getId:function (id) {
                return document.getElementById(id);
            },
            create:function (tagName) {
                return document.createElement(tagName);
            },
            textNode:function (txt) {
                return document.createTextNode(txt);
            }
        }
        //思路 生成 p>ul>li*4
        var dv = utils.getId('dv');

        var optiontitle = 'a),b),c),d)'.split(',');

        questions.forEach(function(item,i){
            var itemContainer = utils.create('div');
            //创建一个 p 标签
            var pTitle = utils.create('p');
            //将标题数据 添加到p标签中
            pTitle.appendChild(utils.textNode((i+1)+'. '+item.title));
            //将p标签 追加到div中
            itemContainer.appendChild(pTitle);
            //创建一个 ul 标签
            var ulOptions = utils.create('ul');
            item.options.forEach(function(option,index){
                var li = utils.create('li');
                li.appendChild(utils.textNode(optiontitle[index]+option));
                li.onclick = option_click;
                if(item.answer == index){
                    li.setAttribute('data-isAnswer','true');
                }
                ulOptions.appendChild(li);
            });
            itemContainer.appendChild(ulOptions);
            dv.appendChild(itemContainer);
        })

        function option_click() {
            var container = this.parentNode.parentNode;
            if(this.getAttribute('data-isAnswer')){
                //正确
                container.setAttribute('style','border:3px solid green');
            }else{
                container.setAttribute('style','border:3px solid red');
            }
        }


</script>