interface_old.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <div class='blockpy-content container-fluid' style='height:100%;'>
  2. <div class='blockpy-popup modal' style='display:none'>
  3. <div class='modal-dialog' style='width:750px'>
  4. <div class='modal-content' id='modal-message'>
  5. <div class='modal-header'>
  6. <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
  7. <h4 class='modal-title'>Dynamic Content</h4>
  8. </div>
  9. <div class='modal-body' style='width:100%; height:400px; white-space:pre-wrap'>
  10. </div>
  11. <div class='modal-footer'>
  12. <button type='button' class='btn btn-white' data-dismiss='modal'>Close</button>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. <canvas id='capture-canvas' style='display:none'></canvas>
  18. <div class="row" style="padding: 10px 0; height: 100%;">
  19. <div class="col-lg-8 col-md-7 col-sm-7" style="height: 100%;">
  20. <div class="row blockpy-toolbar-row" style='padding-bottom: 10px;'>
  21. <div class='col-md-12 col-sm-12 blockpy-toolbar btn-toolbar' role='toolbar' style="padding:0;">
  22. <button type='button' class='btn btn-default blockpy-toolbar-reset' data-bind="visible: !assignment.upload()">
  23. <span class='glyphicon glyphicon-refresh'></span> Reset
  24. </button>
  25. <div class="btn-group">
  26. <label class="btn btn-default btn-file">
  27. <span class="glyphicon glyphicon-upload"></span>Import <input class="blockpy-toolbar-upload" type="file"
  28. style="display: none;">
  29. </label>
  30. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
  31. aria-expanded="false">
  32. <span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
  33. </button>
  34. <ul class="dropdown-menu" style="cursor:pointer">
  35. <li><a id="download-btn" class="blockpy-toolbar-download"><span
  36. class="glyphicon glyphicon-download"></span> Export Python Code</a></li>
  37. </ul>
  38. </div>
  39. <button type='button' class='btn btn-primary blockpy-toolbar-load-sample'>
  40. <span class='glyphicon glyphicon-import'></span> Load Sample Code
  41. </button>
  42. <b class='blockpy-toolbar-feedback text-muted pull-right'
  43. style='z-index:100; margin-top:10px; right:0px; position:absolute; display: none; color: red'>New feedback
  44. &uarr;</b>
  45. <div data-bind="visible: settings.instructor()" style='clear:both'>
  46. </div>
  47. </div>
  48. </div>
  49. <div class='row blockpy-content-bottom' style='padding-bottom: 10px; height: calc(100% - 50px);'>
  50. <div class='blockpy-editor col-md-12 col-sm-12' style="padding:0;">
  51. <div class='blockpy-blocks blockpy-editor-menu' style='height:100%;padding:0;'>
  52. <div class='blockly-div' style='height:100%; width: 100%'></div>
  53. </div>
  54. <div class='blockpy-instructor-popup modal' style='display:none' role='dialog'>
  55. <div class='modal-dialog' role='document'>
  56. <div class='modal-content' id='modal-message'>
  57. <div class='modal-header'>
  58. <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
  59. <h4 class='modal-title'>Assignment Settings</h4>
  60. </div>
  61. <div class='modal-body form-inline' style='width:100%'>
  62. <!-- Name -->
  63. <form class="form-inline" style='display:inline-block'>
  64. <label>Name:</label>
  65. <input type='text' class='blockpy-presentation-name-editor form-control'
  66. data-bind='textInput: assignment.name'>
  67. </form><br>
  68. <!-- Introduction -->
  69. <label>Introduction:</label>
  70. <div class='blockpy-presentation-body-editor'>
  71. </div>
  72. <!-- Initial mode -->
  73. <label class='blockpy-presentation-text-first'>
  74. Initial View:
  75. <select data-bind="value: assignment.initial_view">
  76. <option value="Blocks" selected>Blocks</option>
  77. <option value="Text">Text</option>
  78. <option value="Split">Split</option>
  79. <option value="Instructor">Instructor</option>
  80. <option value="Upload">Upload</option>
  81. </select>
  82. </label>
  83. <br>
  84. <!-- Parsons -->
  85. <label class='blockpy-presentation-parsons-check'>
  86. Parsons:
  87. <input type='checkbox' class='form-control' data-bind="checked:assignment.parsons">
  88. </label>
  89. <br>
  90. <!-- Importable Datasets -->
  91. <label class='blockpy-presentation-importable-check'>
  92. Able to import datasets:
  93. <input type='checkbox' class='form-control' data-bind="checked:assignment.importable">
  94. </label>
  95. <br>
  96. <!-- Importable Datasets -->
  97. <label class='blockpy-presentation-timeoutable-check'>
  98. Disable Timeouts:
  99. <input type='checkbox' class='form-control' data-bind="checked:assignment.disable_timeout">
  100. </label>
  101. <br>
  102. <!-- Filesystem -->
  103. <label class='blockpy-presentation-filesystem-controls'>
  104. Filesystem:
  105. </label>
  106. <!--<label class="btn btn-sm btn-default btn-file">
  107. Upload <input class="blockpy-presentation-upload" type="file" style="display: none;">
  108. </label>-->
  109. <button type='button' class='btn btn-default' data-bind="click: addFile">
  110. <span class='glyphicon glyphicon-file'></span> Add
  111. </button>
  112. <ul data-bind="foreach: assignment.files">
  113. <li>
  114. <a href="#" target="_blank" data-bind="click: $parent.viewFile, text: $data"><span
  115. class='glyphicon glyphicon-new-window'></span></a>
  116. <button class='btn btn-sm btn-danger' data-bind="click: $parent.removeFile">
  117. <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
  118. </li>
  119. </ul>
  120. <label>Available Modules</lable>
  121. <select class='blockpy-available-modules' multiple='multiple'
  122. data-bind="selectedOptions: assignment.modules">
  123. <option>Variables</option>
  124. <option>Decisions</option>
  125. <option>Iteration</option>
  126. <option>Functions</option>
  127. <option>Calculation</option>
  128. <option>Output</option>
  129. <option>Turtles</option>
  130. <option>Python</option>
  131. <option>Values</option>
  132. <option>Lists</option>
  133. <option>Dictionaries</option>
  134. <option>Data - Parking</option>
  135. </select>
  136. </div>
  137. <div class='modal-footer'>
  138. <button type='button' class='btn btn-white' data-dismiss='modal'>Close</button>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <!--<div class='blockpy-editor-menu form-inline'>
  144. </div>-->
  145. <div class='blockpy-upload blockpy-editor-menu'>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. <div class='col-lg-4 col-md-5 col-sm-5' style="height: 100%;">
  151. <div id="py-editor" class="blockpy-editor">
  152. <h4>Python Source Code</h4>
  153. <div class='blockpy-text blockpy-editor-menu' style='padding:0;'>
  154. <div class='blockpy-text-sidebar' style='width:150px; height: 100%; float:left; background-color: #ddd'>
  155. </div>
  156. <textarea class='codemirror-div language-python' style='height:100%'></textarea>
  157. </div>
  158. </div>
  159. <div class='blockpy-content-left row' style="height: 52%;">
  160. <h4>Output</h4>
  161. <div class='blockpy-printer blockpy-printer-default' style="resize: none; height: 90%;"">
  162. </div>
  163. </div>
  164. <div class=" blockpy-toolbar btn-toolbar row" style="padding-top: 5px;">
  165. <button type='button' class='btn blockpy-run' style='float:left' , data-bind='css: execution.status() == "running" ? "btn-info" :
  166. execution.status() == "error" ? "btn-danger" : "btn-success",
  167. visible: settings.instructor() || !assignment.upload()'>
  168. <span class='glyphicon glyphicon-play'></span> Run
  169. </button>
  170. </div>
  171. </div>
  172. </div>
  173. </div>