asq-fiddle-q.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../ace-element/ace-element.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<link rel="import" href="../asq-base/asq-base.html">
<link rel="import" href="elements/asq-fiddle-q-viewer.html">
<link rel="import" href="elements/asq-fiddle-q-presenter.html">

<!--
 Give students an image of a simple Web page + the HTML and ask them to write out the CSS to reproduce this image.

 To seed the editors with initial values add a template with the attribute `seed`. Inside the template add elements with the tags `html`, `css` and `js` respectively. Their innerHTML will seed the corresponding editors.

### Example:

    <asq-fiddle-q selected-panes='["html", "js", "result"]' editor-font-size="1.2em;">
      <asq-stem><h4>Paint a circle in the canvas</h4></asq-stem>
      <template seed>
        <pre html><canvas id="c"></canvas></pre>
        <pre css>#c {width: 200px; height: 200px}</pre>
        <pre js>//Paint a circle in the canvas
    var c = document.getElementById("c");</pre>
      </template> 
    </asq-fiddle-q>

@group DELFT Elements
@element asq-fiddle-q
@demo demo/index.html
-->
<dom-module id="asq-fiddle-q">

  <template>

    <style>
      :host {
        @apply(--layout-vertical);
        min-height:300px;
      }
    </style>

     <!-- Viewer -->
     <template is="dom-if" if="{{hasRole(role, roles.VIEWER)}}" restamp>
       <asq-fiddle-q-viewer
         role="viewer"
         uid="[[uid]]"
         event-bus="[[eventBus]]"
         value="{{value}}"
         selected-panes="{{selectedPanes}}"
         editor-font-size="{{editorFontSize}}"
        >
         <content></content>
       </asq-fiddle-q-viewer>
     </template>
     
     <!-- Presenter -->
    <template is="dom-if" if="{{hasRole(role, roles.PRESENTER)}}" restamp>
      <asq-fiddle-q-presenter
       role="presenter"
       uid="[[uid]]"
       event-bus="[[eventBus]]"
       value="{{value}}"
       selected-panes="{{selectedPanes}}"
       editor-font-size="{{editorFontSize}}"
      >
         <content></content>
       </asq-fiddle-q-presenter>
     </template>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'asq-fiddle-q',

    behaviors: [ASQ.asqQuestionElementBehavior],

    properties: {
      /**
       * The panes to display. When specifying it as an attribute, use an array serialized as string.
       * For Example: `selected-panes='["js", "result"]'`. Notice the single quotes for the attributes
       * and the double quotes for the array items.
       */
      selectedPanes: {
        type: Array,
        value: function (){ return ['html', 'js', 'css', 'result'];},
        reflectToAttribute: true,
        notify: true
      },

      /**
       * The font size of the editors.
       * Example: `font-size="16em"`
       */
      editorFontSize: {
        type: String,
        value: '12px',
        reflectToAttribute: true,
        notify: true
      },

      /**
       * Event bus to communicate with ASQ
       */
      eventBus: {
        type: Object,
        notify: true
      }
    },


    created: function () {
      document.addEventListener('asq-ready', function (evt) {
        this.eventBus = evt.detail.asqEventBus
      }.bind(this));
    },

    /**
     * The `submit` method returns an object that respresents the submission of this question. The object has the following structure:

         {
            questionUid: this.uid, 
            timestamp: new Date(),
            submission: ''
         }
     * Only enabled when the `role` of the element is <b>viewer</b>.
     *
     * @method submit
     */
    submit: function () {
      if (this.role == this.roles.VIEWER) {
        var el = this.$$('asq-fiddle-q-viewer');
        if (!el) {
          throw new Error('submit(): expected asq-fiddle-q-viewer element to exist');
        }
        return el.submit();
      }
    },

    hasRole: function (role, candidate) {
      return role == candidate;
    }
  });

</script>