Fix multiple oral expression questions - refs BT#12283

main/exercise/oral_expression.class.php

@@ -207,6 +207,7 @@ class OralExpression extends Question
         $recordAudioView->assign('directory', $directory);
         $recordAudioView->assign('user_id', $this->userId);
         $recordAudioView->assign('file_name', $this->fileName);
+        $recordAudioView->assign('question_id', $this->id);
 
         $template = $recordAudioView->get_template('exercise/oral_expression.tpl');
 

main/template/default/exercise/oral_expression.tpl

@@ -1,4 +1,4 @@
-<div id="record-audio-recordrtc" class="row text-center">
+<div id="record-audio-recordrtc-{{ question_id }}" class="row text-center">
     <div class="col-sm-4 col-sm-offset-4">
         <div class="form-group">
             <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
@@ -7,38 +7,38 @@
     </div>
     <div class="col-sm-12">
         <div class="form-group">
-            <button class="btn btn-primary" type="button" id="btn-start-record">
+            <button class="btn btn-primary" type="button" id="btn-start-record-{{ question_id }}">
                 <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
             </button>
-            <button class="btn btn-danger" type="button" id="btn-stop-record" disabled>
+            <button class="btn btn-danger" type="button" id="btn-stop-record-{{ question_id }}" disabled>
                 <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
             </button>
-            <button class="btn btn-success" type="button" id="btn-save-record" disabled>
+            <button class="btn btn-success" type="button" id="btn-save-record-{{ question_id }}" disabled>
                 <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
             </button>
         </div>
         <div class="form-group">
-            <audio class="skip hidden center-block" controls id="record-preview"></audio>
+            <audio class="skip hidden center-block" controls id="record-preview-{{ question_id }}"></audio>
         </div>
     </div>
 </div>
 
-<div class="row" id="record-audio-wami">
+<div class="row" id="record-audio-wami-{{ question_id }}">
     <div class="col-sm-4 col-sm-offset-4 text-center">
-        <div id="record-audio-wami-container" class="wami-container"></div>
+        <div id="record-audio-wami-container-{{ question_id }}" class="wami-container"></div>
     </div>
 </div>
 
 <script>
 $(document).on('ready', function () {
     function useRecordRTC() {
-        $('#record-audio-recordrtc').show();
+        $('#record-audio-recordrtc-{{ question_id }}').show();
         var mediaConstraints = {audio: true},
                 recordRTC = null,
-                btnStart = $('#btn-start-record'),
+                btnStart = $('#btn-start-record-{{ question_id }}'),
-                btnStop = $('#btn-stop-record'),
+                btnStop = $('#btn-stop-record-{{ question_id }}'),
-                btnSave = $('#btn-save-record'),
+                btnSave = $('#btn-save-record-{{ question_id }}'),
-                tagAudio = $('#record-preview');
+                tagAudio = $('#record-preview-{{ question_id }}');
 
         btnStart.on('click', function () {
             navigator.getUserMedia = navigator.getUserMedia ||
@@ -120,17 +120,17 @@ $(document).on('ready', function () {
     }
 
     function useWami() {
-        $('#record-audio-wami').show();
+        $('#record-audio-wami-{{ question_id }}').show();
 
         Wami.setup({
-            id: "record-audio-wami-container",
+            id: "record-audio-wami-container-{{ question_id }}",
             onReady: setupGUI,
             swfUrl: '{{ _p.web_lib }}wami-recorder/Wami.swf'
         });
 
         function setupGUI() {
             var gui = new Wami.GUI({
-                    id: 'record-audio-wami-container',
+                    id: 'record-audio-wami-container-{{ question_id }}',
                     singleButton: true,
                     recordUrl: '{{ _p.web_ajax }}record_audio_wami.ajax.php?' + $.param({
                         waminame: '{{ file_name }}.wav',
@@ -146,7 +146,7 @@ $(document).on('ready', function () {
         }
     }
 
-    $('#record-audio-recordrtc, #record-audio-wami').hide();
+    $('#record-audio-recordrtc-{{ question_id }}, #record-audio-wami-{{ question_id }}').hide();
 
     var webRTCIsEnabled = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia ||
             navigator.mediaDevices.getUserMedia;