html - CrowdFlower 标记语言：通过单击选择两个图像之一

Question

我正在设计一个八字形（CrowdFlower）作业，需要更改其 CML（类似于 HTML）和自定义 CSS，以便当我单击图像时它被选中（而不是传统的单选按钮）这是 CML 文件：

<div class="row-fluid row">
  <div class="span12 well outer-well col-sm-12 col-md-12">
    <div class="well-white">
      <p class="text-center">Please look carefully at the following two images and decide which one is more visually complex. 
        <!--<strong class="query">{{query}}</strong>-->
      </p>
    </div>
  </div>
</div>
<br />
<div class="row-fluid row">
  <div class="space">
    <cml:radios label="A or B?" validates="required ss-required">
      <div class="span6 col-sm-6 col-md-6 center">
        <label>
          <cml:radio  label="A" value="A"></cml:radio>
          <img src="{{image_1}}" class="image-object img-polaroid" width="400px" height="500px" />
        </label>
      </div>

      <div class="span6 col-sm-6 col-md-6 center">
        <label>
          <cml:radio  label="B" value="B" ></cml:radio>

          <img src="{{image_2}}" class="image-object img-polaroid" width="400px" height="500px" />
        </label>
      </div>
    </cml:radios>
  </div>
</div>

<div class="row-fluid row">
  <div class="span6 col-sm-6 col-md-6">
    <p class="text-center indicator">A</p>
  </div>
  <div class="span6 col-sm-6 col-md-6">
    <p class="text-center indicator">B</p>
  </div>
</div>
<div class="row-fluid row">
</div>

这是CSS文件：

/* Well magic */
.well-white {
  background-color: white;
}

.well-white p {
  margin-bottom: 0px;
}

.center {
  text-align: center;
}

.well {
  margin-bottom: 0px;
  padding: 15px;
}

.outer-well {
  margin-bottom: 10px;
}

.cml_field.radios label {
  display:inline;
}

.legend {
  font-weight: 300 !important;
}




.query {
  font-size: 150%;
  margin-left: 10px
}


.indicator {
  font-size: 500%;
}


.space {
  height: 300px;
}

label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:10px solid #f00;
}

我想要这样的例子，但能够单击两个图像之一并在其周围绘制一个 10 像素的红色边框并保存答案： https ://jsfiddle.net/qpxvdu0z/

我的工作如下所示： 基本上图像甚至没有并排显示。

基本上，我按照这个 stackoverflow 创建了 jsfiddle，但在图八中不起作用https://stackoverflow.com/a/17541916/2414957

标签： htmlcssradio-buttoncrowdsourcingcrowdflower