Question

我正在建立一个简单的语言学习网站。这个概念是你学习一系列10个单词的flashcard风格，然后使用各种练习对这些相同的单词进行评估。这些练习都使用Javascript，当我添加一个特定的脚本audioControls.js时，它会导致其他一些练习产生不良行为（如下所述）。当audioControls.js被注释掉时，不良行为就会消失，但它会否定音频练习的功能。

我到目前为止的练习如下：

Word Scramble
Word Association
音频协会
拼写检查

enter image description here

当包含audioControls.js不良行为列表时：

- 音频关联和单词关联练习的拖放功能退出工作（拖放使用jquery）

- 下一个按钮不再进入下一个练习（使用分页）

- 单词争夺练习中的拼贴不再可排序（可排序使用jquery）

注意：当我点击返回主页然后点击返回练习时，上述问题就会消失，所以我认为这可能是Javascripts如何加载的问题。

排除audioControls.js：

- 上述问题消失，但您无法再单击音频关联练习中的播放按钮

audioControls.js：

$(function() {
  var yourAudio = document.getElementById('yourAudio'),
  ctrl = document.getElementById('audioControl');

  ctrl.onclick = function () {
    pause_html='<img src="/assets/playButton2.jpg" width="60" height="60">';
    play_html='<img src="/assets/playButton.jpg" width="60" height="60">';

    // Update the Button
    var pause = ctrl.innerHTML === pause_html;
    ctrl.innerHTML = pause ? play_html : pause_html;

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
  };

  document.getElementById('yourAudio').addEventListener('ended', function(){
    ctrl.innerHTML=play_html;
  });   
});

音频协会html：

<h2>Audio Association <img src="/assets/informationTip.jpg" alt="Audio association exercise." title="Click the play button below to listen to the word. Drag the checkmark to its related answer in the blue box" width="35" height="25"></h2>


      <div class="well" style="background-color: #D8D8D8; width: 50%; margin-left: auto; margin-right: auto;">
        <div>
          <audio id="yourAudio" preload='none'>
            <source src="audio/EnglishMP3/<%= @englishAudio %>.mp3" type="audio/mpeg">
            Your browser does not support the audio playback.
           </audio> 
           <a id="audioControl"><img src="/assets/playButton.jpg" width="60" height="60" /></a>

           <img src="/assets/correctAudioAns.png" width="50" height="50" id="draggable"/>
        </div>
      </div>

      <div class="panel panel-default" style="background-color: #CEECF5;">
        <div class="panel-body">
          <div id="audio" class="droppable ui-widget-header">
            <p><%= @spanishAnswerBank[0] %></p>
          </div>

          <div id="audio" class="droppable ui-widget-header"">
            <p><%= @spanishAnswerBank[1] %></p>
          </div>

          <div id="audio" class="droppable ui-widget-header">
            <p><%= @spanishAnswerBank[2] %></p>
          </div>

          <div id="audio" class="droppable ui-widget-header">
            <p><%= @spanishAnswerBank[3] %></p>
          </div>
        </div>
      </div>

      <% if @index != 9 %>
        <ul class="pager">
          <button class="btn btn-large btn-primary" id="nextCl3">Next</button>
        </ul>
      <% else %>
        <ul class="pager">
          <button class="btn btn-large btn-primary" id="scorequizCl3">Score Quiz!</button>
        </ul>
      <% end %>

<div id="scoreboard">
  Current score: <br/>
  <%= @score %> out of <%= current_user.bookmark2 %>
</div>

包括wordAssociation.js，因为下一个按钮和可拖动行为的问题都在本练习中表示：

$(function() {
    $( "#draggable" ).draggable({ containment: "window", revert: "invalid" });

    $( "#word.droppable" ).droppable({


      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
      var droppedOn = $(this).find("p").text();
      //alert(droppedOn);   


      $( "#nextCl2" ).click( function() {


       $.ajax({
         type: 'GET',
         url: 'langs',
         dataType: 'script',
         data: {order: droppedOn, option: "next2"}
       });
      });

       $( "#scorequizCl2" ).click( function() {


       $.ajax({
         type: 'GET',
         url: 'langs',
         dataType: 'script',
         data: {order: droppedOn, option: "scorequiz"}
       });
      });

      }

    });
});

Word Association html：

<h2>Word Association <img src="/assets/informationTip.jpg" alt="Audio association exercise." title="Drag the word given below to its related answer in the blue box" width="35" height="25"></h2>


<div class="well" style="background-color: #D8D8D8; width: 50%; margin-left: auto; margin-right: auto;">
  <div id="draggable" class="ui-widget-content">
    <p><%= @englishAssociation %></p>
  </div>     
</div>

<div class="panel panel-default" style="background-color: #CEECF5;">
      <div class="panel-body">

<div id="word" class="droppable ui-widget-header">
  <p><%= @spanishAnswerBank[0] %></p>
</div>

<div id="word" class="droppable ui-widget-header"">
  <p><%= @spanishAnswerBank[1] %></p>
</div>

<div id="word" class="droppable ui-widget-header">
  <p><%= @spanishAnswerBank[2] %></p>
</div>

<div id="word" class="droppable ui-widget-header">
  <p><%= @spanishAnswerBank[3] %></p>
</div>
</div>
</div>


  <% if @index != 9 %>
    <ul class="pager">

      <button class="btn btn-large btn-primary" id="nextCl2">Next</button>

    </ul>
  <% else %>
    <ul class="pager">

       <button class="btn btn-large btn-primary" id="scorequizCl2">Score Quiz!</button>


    </ul>
  <% end %>

<div id="scoreboard">
  Current score: <br/>
  <%= @score %> out of <%= current_user.bookmark2 %>
</div>

基于包含或排除audioControl.js文件，有关为什么练习行为发生变化的任何想法或想法？

Javascripts导致不良行为的冲突

0 个答案: