V0.2 - Web Component using Polymer 2.0

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="tool-example.html">
  </head>
  <body>
    <tool-example></tool-example>
  </body>
</html>

<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<!-- import the iron-input element -->
<link rel="import" href="https://polygit.org/components/iron-input/iron-input.html">
<link rel="import" href="components/polymer/lib/elements/custom-style.html">


<dom-module id="tool-example">

  <template>

    <style>
    
      :host {
        --tool-colour: red;
      }
      
      .AnswerColour {
        color: var(--tool-colour);
      }
    </style>

    <p>Question: {{question}}</p>
    <label>Answer: </label>

    <iron-input bind-value="{{userAnswer}}">
      <input is="iron-input" placeholder="type answer...">
    </iron-input>

    <p class='AnswerColour'>{{result}}</p>
  </template>

  <script>
    class ToolExample extends Polymer.Element {

      static get is() {
        return "tool-example";
      }

      // set this element's owner property
      constructor() {
        super();
        this.question = "What is the opposite of On?";
        this.correctAnswer = "Off";
      }

      // configure the owner property
      static get properties() {
        return {
          userAnswer: {
            type: String,
            value: '',
            observer: 'evaluateAnswer'
          },
          result: {
            type: String,
            value: ''
          }
        };
      }

      evaluateAnswer(newValue, oldValue) {
        console.log('old: ' + oldValue + ', new: ' + newValue);
        
        if (newValue === '') {
          this.result = '';
          return;
        }
        
        if (this.userAnswer.toUpperCase() === this.correctAnswer.toUpperCase()) {
          this.result = 'Correct';
          
          Polymer.updateStyles({
          '--tool-colour': 'green'});
        }
        else {
          this.result = 'Incorrect';
          
          Polymer.updateStyles({
          '--tool-colour': 'red'});
        }
      }
    }

    customElements.define(ToolExample.is, ToolExample);
  </script>

</dom-module>