ライムサーベイ ベースのアンケートに質問タイプを追加したいと考えています。これは標準的なカラスのような IQ テスト用であり、ユーザーが下のラジオ ボタンをクリックする代わりに、画像領域の正しい選択肢をクリックできるようにしたいと考えています。
スタンドアロンで動作する JQuery の maphighlight スニペット (リンク) がありますが、limsurvey に統合するにはどうすればよいでしょうか?
ライムサーベイの質問プラグインに関するドキュメントは少ないようですが、私が知る限り、それらは主にカスタム データベース エントリが必要な場合を対象としています。この目的では、答えはまだ 1 から 8 までの数にすぎないので、フロントエンドに Javascript をいくつか追加するだけで十分です。ただし、そのような質問が約 60 あることを考えると、中央のどこかに追加することは理にかなっています。
誰かが私を正しい一般的な方向に向けることができますか?
なぜ新しい質問タイプを作ろうとするのですか?
誰でもjavascriptで簡単にできます。1 つの選択肢 (リスト ラジオ) を選択し、スクリプトを使用します。
いくつかの 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のマニュアルからの例
ありがとうございました。提案は本当に役に立ちました。ただし、もう1つ追加したいことがあります。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-answer ラジオ リスト セレクターである必要があります (スクリプトは基本的にエリアからのクリックをラジオ セレクター タグに渡すだけなので)。