神奇的单项选择题和多项选择题答案js选项生成算法

最新推荐文章于 2024-03-14 19:14:32 发布

转载最新推荐文章于 2024-03-14 19:14:32 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qixixiaoyu/p/7703657.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一种使用JavaScript实现的选择题答案生成算法，通过将数字转换为A到Z的字符组合来表示单项或多项选择题的答案，适用于在线教育平台或考试系统中生成直观的选项标识。

选项答案可以用纯数字存储（其实这种也是很好处理选择答案的的方法），这就依靠js的选项生成算法了以及后台的选项生成算法

js选项生成算法（A~Z）

 function getCharStringByInteger(ind) {
            var ret = "";
            for (var i = 0; i < 26; i++) {
                var pow = Math.pow(2, i);
                if (pow > ind) {
                    break;
                }
                //console.log((ind & pow) + "w")
                //console.log(ind  + "i")
                //console.log(pow + "p")
                if ((ind & pow) > 0) {
                    if (ret.length == 0) {
                        ret += String.fromCharCode(65 + i);
                    } else {
                        ret += "、" + String.fromCharCode(65 + i);
                    }
                }
            }
            return ret;
        }

简单的单项选择题和多项选择题答案生成的HTML页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div style="width:250px;margin:auto;margin-top:50px;">
        <input type="text" id="select-number" style="height:35px;width:250px;" />
        <a id="ok" style="width:250px;height:35px;display:block;margin-top:30px;text-align:center;background-color:#b6ff00;line-height:35px;">确定</a>
        <input type="text" id="return-number" style="height:35px;width:250px;margin-top:30px;" />
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        $("#ok").click(function () {
            $("#return-number").val(getCharStringByInteger($("#select-number").val()));
        });


        function getCharStringByInteger(ind) {
            var ret = "";
            for (var i = 0; i < 26; i++) {
                var pow = Math.pow(2, i);
                if (pow > ind) {
                    break;
                }
                //console.log((ind & pow) + "w")
                //console.log(ind  + "i")
                //console.log(pow + "p")
                if ((ind & pow) > 0) {
                    if (ret.length == 0) {
                        ret += String.fromCharCode(65 + i);
                    } else {
                        ret += "、" + String.fromCharCode(65 + i);
                    }
                }
            }
            return ret;
        }
    </script>
</body>
</html>

生成选项的样例

ps：（ind & pow）> 0 中的&运算符在下一遍文章有详细的解析，后台的算法后面再写

后台选项生成算法

转载于:https://www.cnblogs.com/qixixiaoyu/p/7703657.html