unserver-unify/src/app/course/chapter/fillblank.html

<style type="text/css">
  .stroke_img {
    background: url('assets/images/strok_bg.jpg') no-repeat 0 0;
    background-size: 100%;
  }
</style>
<!--<script src="assets/libs/RecordRTC.min.js">
</script>-->
<div class="stroke_writing_all">
  <div class="btn-group pull-right">
    <button class="btn btn-u" style="margin-right:5px;" ng-click="wctrl.submit()" ng-disabled="wctrl.submitted" translate>提交</button>
    <button class="btn btn-warning" style="margin-right:5px;" ng-click="wctrl.reset()" translate>重做</button>
    <button class="btn btn-info" ng-click="wctrl.continue()" translate>继续</button>
  </div>
  <div class="headline text-center" ng-if="wctrl.chapter.multiCharacter">
    <h3>
      <strong>
        {{ wctrl.chapter.options.name }}
      </strong>
    </h3>
    <h5>
      <span class="color-blue">
        {{ wctrl.chapter.options.date }} 
        <span>
          - {{ wctrl.chapter.options.author }}
        </span>
      </span>
    </h5>
  </div>
  <div class="headline text-left" ng-if="!wctrl.chapter.multiCharacter">
    <h3>
      {{ wctrl.chapter.name }}
    </h3>
  </div>
  <div class="clearfix"></div>
  <div class="row text-center padding-left-15">
    <div class="col-xs-10 popover_container2" ng-class="{'col-xs-offset-1':!wctrl.chapter.content&&!wctrl.chapter.photo}"  style="margin-bottom: 20px; ">
      <div class="" ng-class="{'fillup3 col-xs-6':wctrl.chapter.size==3, 'col-xs-6':wctrl.chapter.size==4, 'fillup5 col-xs-6':wctrl.chapter.size==5, 'fillup6 col-xs-10 col-xs-offset-1':wctrl.chapter.size==6, 'fillup7 col-xs-11':wctrl.chapter.size==7}" ng-repeat="idiom in wctrl.idioms">
        <div class="stroke_text multi_idiom">
          <div>
            <h2 class="seprate count_4" ng-class="{'seprate_highlight':false, 'active':false}">
              <a ng-class="{'active':false}" ng-repeat="word in idiom.q track by $index">
                <span ng-if="word">
                  {{word}} 
                </span>
                <span class="drop_box" ng-if="!word" ng-class="{ 'correct_word':wctrl.submitted && wctrl.dropIdiomMap[idiom.idx].correct, 'wrong_word':wctrl.submitted && !wctrl.dropIdiomMap[idiom.idx].correct}" data-drop="true" data-jqyoui-options ng-model="wctrl.dropIdiomMap[idiom.idx]"
                  jqyoui-droppable="{index: {{$index}}, onDrop:'dropCallback',onOver: 'overCallback', onOut: 'outCallback'}">
                <span data-drag="true" data-jqyoui-options ng-model="wctrl.dropIdiomMap[idiom.idx]"  jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true}" >{{wctrl.dropIdiomMap[idiom.idx].text}}</span>
                </span>
              </a>
            </h2>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="navbar-inner">
    <div class="form-inline">
      <div class="btn-droppable" ng-repeat="item in wctrl.answers track by $index" data-drop="true" ng-model='wctrl.answers' jqyoui-droppable="{index: {{$index}}}">
        <div class="btn btn-info btn-draggable" data-drag="true" data-jqyoui-options="{revert: 'invalid'}" ng-model="wctrl.answers" jqyoui-draggable="{index: {{$index}},placeholder:true,animate:true, onStart:'startCallback(item, $index)', onStop: 'stopCallback', onDrag: 'dragCallback'}">
          {{item.text}}
        </div>
      </div>
    </div>
    <div ng-if="wctrl.submitted">
      <b class="color-green">正确:</b>{{wctrl.correctCount}}&nbsp;&nbsp;&nbsp;
      <b class="color-red">错误:</b>{{wctrl.wrongCount}}
    </div>
    <b ng-if="!wctrl.submitted">将汉字拖入到对应成语的空中</b>
  </div>
</div>