Язык разметки CrowdFlower: выберите одно из двух изображений, нажав - PullRequest
Новая
       38

Язык разметки CrowdFlower: выберите одно из двух изображений, нажав

0 голосов
/ 11 мая 2018

Я проектирую работу Figure-Eight (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/

Моя работа показана ниже: enter image description here В основном изображения даже не показываются рядом.

По сути, я следовал этому стековому потоку, чтобы создать jsfiddle, но он не работает на рисунке восемь https://stackoverflow.com/a/17541916/2414957

...