oral_expression.tpl 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <div id="record-audio-recordrtc-{{ question_id }}" class="row">
  2. <div class="col-sm-4 col-sm-offset-4">
  3. <div class="form-group text-center">
  4. <span class="fa fa-microphone fa-5x fa-fw" aria-hidden="true"></span>
  5. <span class="sr-only">{{ 'RecordAudio'|get_lang }}</span>
  6. </div>
  7. </div>
  8. <div class="col-sm-12">
  9. <div class="form-group text-center">
  10. <button class="btn btn-primary" type="button" id="btn-start-record-{{ question_id }}">
  11. <span class="fa fa-circle fa-fw" aria-hidden="true"></span> {{ 'StartRecordingAudio'|get_lang }}
  12. </button>
  13. <button class="btn btn-primary hidden" type="button" id="btn-pause-record-{{ question_id }}" disabled>
  14. <span class="fa fa-pause fa-fw" aria-hidden="true"></span> {{ 'PauseRecordingAudio'|get_lang }}
  15. </button>
  16. <button class="btn btn-primary hidden" type="button" id="btn-play-record-{{ question_id }}" disabled>
  17. <span class="fa fa-play fa-fw" aria-hidden="true"></span> {{ 'PlayRecordingAudio'|get_lang }}
  18. </button>
  19. <button class="btn btn-danger hidden" type="button" id="btn-stop-record-{{ question_id }}" disabled>
  20. <span class="fa fa-square fa-fw" aria-hidden="true"></span> {{ 'StopRecordingAudio'|get_lang }}
  21. </button>
  22. <button class="btn btn-success hidden" type="button" id="btn-save-record-{{ question_id }}"
  23. data-loadingtext="{{ 'Uploading'|get_lang }}"
  24. disabled>
  25. <span class="fa fa-send fa-fw" aria-hidden="true"></span> {{ 'SaveRecordedAudio'|get_lang }}
  26. </button>
  27. <button id="hide_description_{{ question_id }}" type="button" class="btn btn-default advanced_options" data-toggle="button" aria-pressed="false" autocomplete="off">
  28. <em class="fa fa-bars"></em> {{ 'AddText' | get_lang }}
  29. </button>
  30. </div>
  31. <div class="form-group text-center">
  32. <audio class="skip hidden center-block" controls id="record-preview-{{ question_id }}"></audio>
  33. </div>
  34. <div class="well">
  35. {{ 'OralExpressionHelpText' | get_lang }}
  36. </div>
  37. <div class="record-message"></div>
  38. </div>
  39. </div>
  40. <div class="row" id="record-audio-wami-{{ question_id }}">
  41. <div class="col-sm-4 col-sm-offset-4 text-center">
  42. <div id="record-audio-wami-container-{{ question_id }}" class="wami-container"></div>
  43. </div>
  44. </div>
  45. <script>
  46. $(document).on('ready', function () {
  47. RecordAudio.init({
  48. blockId: '#record-audio-recordrtc-{{ question_id }}',
  49. btnStartId: '#btn-start-record-{{ question_id }}',
  50. btnPauseId: '#btn-pause-record-{{ question_id }}',
  51. btnPlayId: '#btn-play-record-{{ question_id }}',
  52. btnStopId: '#btn-stop-record-{{ question_id }}',
  53. plyrPreviewId: '#record-preview-{{ question_id }}',
  54. directory: '{{ directory }}',
  55. type: 'document'
  56. }, {
  57. blockId: '#record-audio-wami-{{ question_id }}',
  58. containerId: 'record-audio-wami-container-{{ question_id }}',
  59. directory: '{{ directory }}',
  60. userId: {{ user_id }},
  61. type: 'document'
  62. }, '{{ file_name }}');
  63. if (0 === $('#hide_description_{{ question_id }}_options').length) {
  64. $('#hide_description_{{ question_id }}').remove();
  65. }
  66. });
  67. </script>