Figure-Eight(CrowdFlower)任务CML/CSS修改：点击图片选中并排显示

我来帮你搞定这两个核心问题：让图片正常并排显示，并且实现点击图片触发单选选中、显示红色边框的效果。Figure-Eight平台对自定义HTML/CSS/JS有特定限制，咱们得适配它的渲染规则来调整代码。

一、修复图片并排显示问题 #

你原来用了Bootstrap的span6、col-sm-6类，但平台可能没加载完整Bootstrap，或者这些类的样式被平台默认样式覆盖了。咱们用自定义浮动布局替代，确保两张图片能稳定并排：

修改CML中的布局部分 #

把包含图片的div标签类换成自定义的image-container，移除可能冲突的平台类：

<div class="row-fluid row">
  <div class="space">
    <cml:radios label="A or B?" validates="required ss-required">
      <!-- 替换原有span6等类为自定义image-container -->
      <div class="image-container">
        <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="image-container">
        <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>

在CSS中添加自定义布局样式 #

/* 自定义图片容器，实现并排 */
.image-container {
  width: 48%; /* 留间距避免挤在一起 */
  float: left;
  text-align: center;
  margin: 0 1%; /* 左右间距 */
}

/* 清除浮动，防止父容器高度塌陷 */
.space::after {
  content: "";
  display: table;
  clear: both;
}

二、实现点击图片选中单选并显示红色边框 #

Figure-Eight可能会拦截原生表单元素的事件，所以咱们要提高CSS选择器优先级，同时添加JavaScript确保点击图片时能正确触发单选按钮的选中状态：

调整CSS样式（提高优先级+优化选中效果） #

/* 隐藏单选按钮，用更高优先级选择器确保生效 */
.cml_field.radios label > input[type="radio"] {
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

/* 默认图片样式，添加过渡动画提升体验 */
.cml_field.radios label > input[type="radio"] + img {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}

/* 选中后的图片样式，高优先级覆盖平台样式 */
.cml_field.radios label > input[type="radio"]:checked + img {
  border: 10px solid #f00;
}

添加JavaScript绑定事件（兼容平台限制） #

在CML末尾嵌入这段脚本，确保点击图片时能正确选中单选按钮，同时触发平台的表单保存事件：

// 等待页面完全加载后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有目标图片
  const imageObjects = document.querySelectorAll('.image-object');
  
  imageObjects.forEach(img => {
    img.addEventListener('click', function() {
      // 找到对应的单选按钮
      const radio = this.previousElementSibling;
      if (radio && radio.type === 'radio') {
        radio.checked = true;
        // 触发change事件，让平台正确保存答案
        radio.dispatchEvent(new Event('change'));
      }
    });
  });
});

三、完整修改后的代码示例 #

最终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.</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="image-container">
        <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="image-container">
        <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="image-container">
    <p class="text-center indicator">A</p>
  </div>
  <div class="image-container">
    <p class="text-center indicator">B</p>
  </div>
</div>

<!-- 嵌入自定义脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const imageObjects = document.querySelectorAll('.image-object');
  imageObjects.forEach(img => {
    img.addEventListener('click', function() {
      const radio = this.previousElementSibling;
      if (radio && radio.type === 'radio') {
        radio.checked = true;
        radio.dispatchEvent(new Event('change'));
      }
    });
  });
});
</script>

最终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: auto; /* 取消固定高度，适配内容 */ padding: 20px 0; }

/* 自定义图片容器布局 */
.image-container {
  width: 48%;
  float: left;
  text-align: center;
  margin: 0 1%;
}
.space::after {
  content: "";
  display: table;
  clear: both;
}

/* 单选按钮与图片样式 */
.cml_field.radios label > input[type="radio"] {
  visibility: hidden;
  position: absolute;
  width: 0;
  height: 0;
}
.cml_field.radios label > input[type="radio"] + img {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.cml_field.radios label > input[type="radio"]:checked + img {
  border: 10px solid #f00;
}

关键说明 #

1. 布局调整：用自定义浮动布局替代Bootstrap类，避免平台样式冲突，确保图片稳定并排。
2. 样式优先级：通过cml_field.radios前缀提高选择器优先级，确保自定义样式能覆盖平台默认样式。
3. JS事件绑定：手动添加点击事件，确保图片点击能触发单选按钮的选中状态，同时触发change事件让平台正确保存答案。

内容的提问来源于stack exchange，提问作者Mona Jalal