石灰调查中的新条目类型答案

【问题标题】：New entry types in limesurvey石灰调查中的新条目类型
【发布时间】：2014-02-28 16:04:02
【问题描述】：

我想将问题类型添加到基于 Limesurvey 的调查中。它适用于标准raven-like IQ tests，我希望用户能够单击图片区域上的正确选择，而不是单击下面的单选按钮。

我有一个单独工作的 JQuery maphighlight sn-p (link)，但我想知道如何最好地将它集成到 Limesurvey 中？

关于石灰调查问题插件的文档似乎很少，但据我所知，它们主要用于您需要自定义数据库条目时。为此，答案仍然只是 1-8 的数字，所以我应该能够在前端使用一些 Javascript。但是，考虑到我有大约 60 个这样的问题，将其添加到中心位置是有意义的。

谁能指出正确的大方向？

【问题讨论】：

标签： javascript jquery plugins limesurvey

【解决方案1】：

如果你想使用来自your example的图像和地图区域...

1) 使用与您的地图区域（A、B、C...）的 ID 匹配的答案代码创建一个单选题。

2) 将您的图像和地图插入到 list-radio 问题源中。

3) 将此脚本添加到问题源中。该脚本将查找并单击 ID 以区域 ID 结尾的单选输入。

<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('area').click(function(event){ event.preventDefault(); var qID = '{QID}'; var thisID = $(this).attr('id'); $('input.radio[id$="X'+qID+thisID+'"]').click(); }); }); </script>

【讨论】：

哦，请注意，将代码插入 LimeSurvey 问题源时，您需要在所有左大括号之后和所有右大括号之前留一个空格。

【解决方案2】：

为什么要尝试制作新的问题类型？

你可以很容易地在 javascript 中做谁。选择一个选项（列表单选），然后使用脚本。

带有一些 SVG 的示例：

Choose your favorite color<br />
<script type="text/javascript">
$(document).ready(function() {
        $('#question{QID} .answers-list').hide(); //uncomment to hide radio button
    $("path").click(function() {
        if ($(this).attr('id') != "selected")
                {
                        $("[name={SGQ}]").filter("[value='"+$(this).attr('id')+"']").attr("checked",true);
        $("#selected").css('fill',$(this).css('fill'));
                         $("[name={SGQ}]").filter("[value='"+$(this).attr('id')+"']").trigger('click');
                }
        else
                {
            $("#selected").css('fill','none');
                        $("[name={SGQ}]").attr("checked",false);
                        $("[name={SGQ}]").filter("[value='']").trigger('click');
                }
    });
});
</script>
<center><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="150" height="150" style="margin-left:25px">
  <path
     d="M 73.21875,0.03125 A 74.999999,74.999999 0 0 0 37.5,10.0625 l 18.75,32.5 a 37.5,37.5 0 0 1 37.5,-0.03125 L 112.5,10.0625 A 74.999999,74.999999 0 0 0 73.21875,0.03125 z"
     id="C1"
     style="fill:#008000;fillla date au format  traduction-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="M 112.5,10.0625 93.75,42.53125 A 37.5,37.5 0 0 1 112.5,75 L 150,75 A 74.999999,74.999999 0 0 0 112.5,10.0625 z"
     id="C2"
     style="fill:#ffff00;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 112.5,75 a 37.5,37.5 0 0 1 -18.75,32.4375 l 18.75,32.5 A 74.999999,74.999999 0 0 0 150,75 l -37.5,0 z"
     id="C3"
     style="fill:#ff8000;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 93.75,107.4375 a 37.5,37.5 0 0 1 -37.5,0.0312 L 37.5,139.9375 a 74.999999,74.999999 0 0 0 75,0 l -18.75,-32.5 z"
     id="C4"
     style="fill:#ff0000;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m 0,75 a 74.999999,74.999999 0 0 0 37.5,64.9375 L 56.25,107.46875 A 37.5,37.5 0 0 1 37.5,75 L 0,75 z"
     id="C5"
     style="fill:#800080;fillla date au format  traduction-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="M 37.5,10.0625 A 74.999999,74.999999 0 0 0 0,75 l 37.5,0 A 37.5,37.5 0 0 1 56.25,42.5625 l -18.75,-32.5 z"
     id="C6"
     style="fill:#0000ff;fill-opacity:1;stroke:none;cursor:pointer" />
  <path
     d="m -182.40128,-1.5888613 a 48.619156,48.619156 0 1 1 -97.23831,0 48.619156,48.619156 0 1 1 97.23831,0 z"
     transform="matrix(0.23653228,0,0,0.23653228,129.64379,75.375816)"
     id="selected"
     style="fill:none;stroke:#000000;stroke-width:8.45550537;stroke-miterlimit:4;stroke-dasharray:none" />
</svg> </center>

但使用地图更容易。您可以使用 alt 属性或 id 属性来链接地图和答案。

示例取自 LimeSUrvey 手册

【讨论】：

【解决方案3】：

谢谢。这些建议真的很有帮助。但是 - 我还想补充一件事。由于它是我需要重复 60 次的问题类型，因此不单独为每个问题重复它似乎是合乎逻辑的。值得庆幸的是，这也可以通过我发现的模板来实现。

最终解决方案基本遵循tpartner给出的建议。我需要将以下代码放入 template.js

$(document).ready(function(){
  var marbel_map = '<map name="$NAME"><area coords="340,100,425,186" data-maphilight="{" href="#" id="1" shape="rect" /> <area coords="340,195,425,283" data-maphilight="{" href="#" id="5" shape="rect" /> <area coords="437,100,522,186" data-maphilight="{" href="#" id="2" shape="rect" /> <area coords="437,195,522,283" data-maphilight="{" href="#" id="6" shape="rect" /> <area coords="535,100,620,186" data-maphilight="{" href="#" id="3" shape="rect" /> <area coords="535,195,620,283" data-maphilight="{" href="#" id="7" shape="rect" /> <area coords="632,100,717,186" data-maphilight="{" href="#" id="4" shape="rect" /> <area coords="632,195,717,283" data-maphilight="{" href="#" id="8" shape="rect" /></map>';
  $('.marbel').each(function(ind,el) {
      $(marbel_map.replace(/id=["']([^"']*)["']/g,"id='"+el.getAttribute('qid')+"$1'")
                                .replace(/\$NAME/g,el.getAttribute('qid')+'_map')).insertBefore(el);
      $(el).attr("usemap",'#'+el.getAttribute('qid')+'_map').maphilight();
      $(el).closest(".question-wrapper").find('.answers-list:first').hide();
    });

   $('area').click(function(){
      $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight');
      $(this).parent().find('.selected').data('maphilight', {
        alwaysOn: false
      }).trigger('alwaysOn.maphilight').removeClass('selected');

      $(this).addClass('selected');

      var id = this.id;
      $('#answer'+id).trigger('click');
    });
});

还有一个<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>标签到startpage.pstpl

之后，每个问题代码就变成了

<img class="marbel" qid="{SGQ}" src="http://localhost/misc/marbelX.png" />

问题仍然需要是类型为 8 答案的单选列表选择器，正如建议的那样（因为脚本本质上只是将点击从该区域传递到单选选择器标签）。

【讨论】：