implementation ready for testing

app/assets/javascripts/editor.js.erb

@@ -403,8 +403,6 @@ $(function() {
     $('.editor').each(function(index, element) {
       var editor = ace.edit(element);
 
-      console.log('ace', element)
-
       if (qa_api) {
         editor.getSession().on("change", function (deltaObject) {
           qa_api.executeCommand('syncEditor', [active_file, deltaObject]);
@@ -836,9 +834,9 @@ $(function() {
 
   var showFrame = function(frame) {
     active_frame = frame;
-    // should not be hidden to generate multiple ace editors in edit mode
-    //$('.frame').hide();
-    $('.frame').show();
+    $('.frame').hide();
+    frame.show();
+
   };
 
   var showOutput = function(event) {

app/assets/stylesheets/editor.css.scss

@@ -4,14 +4,12 @@ button i.fa-spin {
 
 .editor {
   height: 100%;
-  width: auto;
-  margin: 12px;
+  width: 100%;
 }
 
 .frame {
   display: none;
-  height: 200px;
-  width: auto;
+  height: 400px;
 
   audio, img, video {
     max-width: 100%;
@@ -57,11 +55,8 @@ button i.fa-spin {
 
 #files {
   overflow: auto;
-
 }
 
-
-
 #hint {
   display: none;
 }

app/controllers/exercises_controller.rb

@@ -63,7 +63,6 @@ class ExercisesController < ApplicationController
   end
 
   def edit
-
   end
 
   def import_proforma_xml

app/views/exercises/_file_form.html.slim

@@ -1,4 +1,3 @@
-//- id = f.object.id
 = form_for(file) do |f|
   li.panel.panel-default
     .panel-heading role="tab" id="heading"

app/views/exercises/_form.html.slim

@@ -31,7 +31,7 @@
   h2 = t('activerecord.attributes.exercise.files')
 
   ul#files.list-unstyled.panel-group
-    = @exercise.files.each do |file|
+    - @exercise.files.each do |file|
       = render partial: 'file_form', locals: { file: file }
 
   a#add-file.btn.btn-default.btn-sm.pull-right href='#' = t('.add_file')

app/views/exercises/edit.html.slim

@@ -1,3 +1,3 @@
 h1 = @exercise
 
-= render('form', exercise: @exercise, files: @files)
+= render('form')