mini_cocopi/blockly/demos/plane/template.soy

{namespace planepage}

/**
 * This is a Closure Template.
 *
 * See the README.txt for details.
 */

/**
 * Translated messages for use in JavaScript.
 */
{template .messages}
  <div style="display: none">
    <span id="Plane_rows">{msg meaning="Plane.rows" desc="page text - Total number of rows of seats on an airplane.\n\nParameters:\n* %1 - number of rows of seats on an airplane.  It is always an integer greater than or equal to zero."}Rows: %1{/msg}</span>
    <span id="Plane_getRows">{msg meaning="Plane.getRows" desc="block text - The number of rows on the airplane, to be used in a mathematical equation, such as: 'seats = 4 x '''rows (5)''''.\n\nParameters:\n* %1 - number of rows of seats on an airplane.  It is always an integer greater than or equal to zero."}rows (%1){/msg}</span>
    <span id="Plane_rows1">{msg meaning="Plane.rows1" desc="page text - The number of rows of first-class seats on the airplane.  You can see the block at [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=3].\n\nParameters:\n* %1 - number of rows of first-class seats on an airplane.  It is always an integer greater than or equal to zero."}1st class rows: %1{/msg}</span>
    <span id="Plane_getRows1">{msg meaning="Plane.getRows1" desc="block text - The number of rows of first-class seats on the, to be used in a mathematical equation.  See [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=3].\n\nParameters:\n* %1 - number of rows of first-class seats on an airplane.  It is always an integer greater than or equal to zero."}1st class rows (%1){/msg}</span>
    <span id="Plane_rows2">{msg meaning="Plane.rows2" desc="page text - The number of rows of second-class seats on the airplane.  %1 is an integer greater or equal to zero.  See [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=3].\n\nParameters:\n* %1 - number of rows of second-class seats on an airplane.  It is always an integer greater than or equal to zero."}2nd class rows: %1{/msg}</span>
    <span id="Plane_getRows2">{msg meaning="Plane.getRows2" desc="block text - The number of rows of second-class (also called 'economy class') seats on the airplane, to be used in a mathematical expression.\n\nParameters:\n* %1 - number of rows of second-class seats on an airplane.  It is always an integer greater than or equal to zero."}2nd class rows (%1){/msg}</span>
    <span id="Plane_seats">{msg meaning="Plane.seats" desc="page text - The total number of seats on the airplane.\n\nParameters:\n* %1 - number of seats on an airplane.  It is always either the next message or an integer greater than or equal to zero."}Seats: %1{/msg}</span>
    <span id="Plane_placeholder">{msg meaning="Plane.placeholder" desc="page text - A word or symbol indicating that this numeric value has not yet been determined."}?{/msg}</span>
    <span id="Plane_setSeats">{msg meaning="Plane.setSeats" desc="block text - The first half of a mathematical equation determining the number of seats in an airplane, such as: ''''seats =''' 4 x rows'."}seats ={/msg}</span>
  </div>
{/template}

/**
 * Web page structure.
 */
{template .start}
  {call .messages /}
  <table width="100%">
    <tr>
      <td>
        <h1><a href="https://developers.google.com/blockly/">Blockly</a>&rlm; &gt;{sp}
          <a href="../index.html">Demos</a>&rlm; &gt;{sp}
          <span id="title">
            {msg meaning="Plane.plane" desc="title - Specifies that this is Blockly's '''Plane''' (airplane) tutorial.  The word 'plane' was chosen over 'airplane' in English because it is shorter and less formal."}
              Plane Seat Calculator
            {/msg}
          </span>
          {sp}&nbsp;{sp}
          {for $i in range(1, $ij.maxLevel + 1)}
            {sp}
            {if $i == $ij.level}
              <span class="tab" id="selected">{$i}</span>
            {else}
              {if $i < $ij.level}
                <a class="tab previous" href="?lang={$ij.lang}&level={$i}">{$i}</a>
              {else}
                <a class="tab" href="?lang={$ij.lang}&level={$i}">{$i}</a>
              {/if}
            {/if}
          {/for}
        </h1>
      </td>
      <td class="farSide">
        <span {if $ij.lang == 'en'}id="languageBorder"{/if} style="padding: 10px">
          <select id="languageMenu"></select>
        </span>
      </td>
    </tr>
  </table>

  <script src="slider.js"></script>
  <svg
     id="plane"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     width="600"
     height="320"
     viewBox="0 110 600 320">
    <defs>
      <g id="row1st">
        <rect
           class="seat1st"
           width="10" height="10"
           x="75" y="243" />
        <rect
           class="seat1st"
           width="10" height="10"
           x="75" y="254" />
        <rect
           class="seat1st"
           width="10" height="10"
           x="75" y="272" />
        <rect
           class="seat1st"
           width="10" height="10"
           x="75" y="283" />
      </g>
      <g id="row2nd">
        <rect
           class="seat2nd"
           width="10" height="8"
           x="75" y="243" />
        <rect
           class="seat2nd"
           width="10" height="8"
           x="75" y="251" />
        <rect
           class="seat2nd"
           width="10" height="8"
           x="75" y="269" />
        <rect
           class="seat2nd"
           width="10" height="8"
           x="75" y="277" />
        <rect
           class="seat2nd"
           width="10" height="8"
           x="75" y="285" />
      </g>
      <linearGradient id="grad1" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" style="stop-color:#fff;stop-opacity:0" />
        <stop offset="100%" style="stop-color:#fff;stop-opacity:1" />
      </linearGradient>
      <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#fff;stop-opacity:0" />
        <stop offset="100%" style="stop-color:#fff;stop-opacity:1" />
      </linearGradient>
    </defs>
    <path
        d="m 214,270 l 159,-254 31,-16 -74,189 0,162 74,189 -31,16 z"
        id="wing" />
    <path
        d="m 577,270 22,-93 -27,6 -44,88 44,88 27,6 z"
        id="tail" />
    <path
        d="m 577,270 l -94,24 h -407 c -38,0 -75,-13 -75,-26 c 0,-13 38,-26 75,-26 h 407 z"
        id="fuselage" />
    <rect
       width="610"
       height="100"
       x="-5"
       y="110"
       fill="url(#grad1)" />
    <rect
       width="610"
       height="100"
       x="-5"
       y="330"
       fill="url(#grad2)" />
    <text id="row1stText" x="55" y="380"></text>
    <text id="row2ndText" x="55" y="420"></text>
    <text x="55" y="210">
      <tspan id="seatText"></tspan>
      <tspan id="seatYes" style="fill: #0c0;" dy="10">&#x2713;</tspan>
      <tspan id="seatNo" style="fill: #f00;" dy="10">&#x2717;</tspan>
    </text>
    {if $ij.level > 1}
      <rect
          id="crew_right" class="crew"
          width="10" height="10"
          x="35" y="254" />
      <rect
          id="crew_left" class="crew"
          width="10" height="10"
          x="35" y="272" />
    {/if}
  </svg>

  <p>
    {switch $ij.level}
      {case 1}
        {msg meaning="Plane.description1" desc="instructions - Note that in [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=1 this level], there is only one type of seat on the plane."}An airplane has a number of rows of passenger seats.  Each row contains four seats.{/msg}
      {case 2}
        {msg meaning="Plane.description2" desc="instructions - Note that in [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=2 this level], there are two types of seats on this plane."}An airplane has two seats in the flight deck (for the pilot and co-pilot), and a number of rows of passenger seats.  Each row contains four seats.{/msg}
      {case 3}
        {msg meaning="Plane.description3" desc="instructions - Note that in [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=3 this level], there are three types of seats on this plane.  Be sure to use the same terms for '1st class' and '2nd class' as you did for the earlier messages."}An airplane has two seats in the flight deck (for the pilot and co-pilot), and a number of rows of 1st class and 2nd class passenger seats.  Each 1st class row contains four seats. Each 2nd class row contains five seats.{/msg}
    {/switch}
  </p>
  <p>
    {msg meaning="Plane.instructions" desc="page text - This text appears below the airplane graphic and above the space for the user to create the formula.  The number of rows an the graphic may be changed by the user with a slider.  See [http://blockly-share.appspot.com/static/apps/plane/plane.html?lang=en&level=1] for a picture."}Build a formula (below) that calculates the total number of seats on the airplane as the rows are changed (above).{/msg}
  </p>

  <script src="../../blockly_compressed.js"></script>
  <script src="../../blocks_compressed.js"></script>
  <script src="../../javascript_compressed.js"></script>
  <script src="../../msg/js/{$ij.lang}.js"></script>
  <script src="blocks.js"></script>
  {call .toolbox /}
  <div id="blockly"></div>
{/template}

/**
 * Toolboxes for each level.
 */
{template .toolbox}
  <xml id="toolbox" style="display: none">
    <block type="math_number"></block>
    <block type="math_arithmetic">
      <value name="A">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="B">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
    </block>
    <block type="math_arithmetic">
      <field name="OP">MULTIPLY</field>
      <value name="A">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="B">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
    </block>
    {if $ij.level <= 2}
      <block type="plane_get_rows"></block>
    {else}
      <block type="plane_get_rows1st"></block>
      <block type="plane_get_rows2nd"></block>
    {/if}
  </xml>
{/template}