https://codepen.io/okim/pen/jLKZYJ/

SpiffyQuiz.js

var App = App || {};

App = {
  data: {
    counter: 0
    //  Other things might be useful here
  },

  //
  //  TASK 1
  //
  task1: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Task 1"),
              m("p", {class: "card-header-title"}, "Increment counter onclick")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"},
              m("div", {class: "content has-text-centered"}, App.counter_input())
            )
          ),
          m("footer", {class: "card-footer button"}, App.counter_increment())
        ]
      )
    ]
  },
  
  counter_input: function ()
  {
    return m("input[disabled]",
      {
        id: "counter",
        class: "has-text-centered has-text-centered is-half is-offset-one-quarter",
        type: "text",
        value: App.data.counter
      }
    )
  },
  
  counter_increment: function ()
  {
    return m("a",
      {
        id: "clicker",
        class: "card-footer-item",
        onclick: function ()
        {
          // Task 1 - Question 1  - How are we tracking clicks?
          //
          // Answer = 

          // It won't be this easy forever..
          // Uncomment line below to continue on your journey..
          // App.data.counter++;

          // Might be handy for Task 2..
          // App.multiply_it();
        }
      },
      "Increment"
    );
  },

  //
  //  TASK 2
  //
  task2: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Task 2"),
              m("p", {class: "card-header-title"}, "Multiply increment value by ϕ")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"},
              [
                App.multiplier_input(),
                "*",
                App.phi_input(),
                "=",
                App.multiplied_input()
              ]
            )
          )
        ]
      )
    ];
  },
  
  multiplier_input: function ()
  {
    //  What would an input with a dynamic value look like?
    return m("input[disabled]", {id: "multiplier", class: "has-text-centered", type: "text", size: "2", value: "hmmm"});
  },
  
  phi_input: function ()
  {
    return m("input[disabled]", {class: "has-text-centered", type: "text", id: "phi", value: "1.618", size: "4"})
  },
  
  multiplied_input: function ()
  {
    //  What would an input with a dynamic value look like?
    return m("input[disabled]", {class: "has-text-centered", type: "text", id: "multiplied", size: "16", value: "hmmm"})
  },
  
  multiply_it: function ()
  {
    // We should probably store some value somewhere
  },

  //
  // Task 3
  //
  task3: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Task 3"),
              m("p", {class: "card-header-title"}, "Reset Counter")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"}, "The button below should reset the above counter.")
          ),
          m("footer", {class: "card-footer"},
            m("a",
              {
                class: "card-footer-item button",
                onclick: function ()
                {
                  // Don't overthink this one
                }
              },
              "Reset"
            )
          )
        ]
      )
    ];
  },
  
  //
  //  Bonus 1
  //
  bonus1: function ()
  {
    return [
      m("div", {class: "card"},
        [
          m("header", {class: "card-header"},
            [
              m("p", {class: "card-header-title is-8"}, "Bonus 1"),
              m("p", {class: "card-header-title"}, "Get current BTC price")
            ]
          ),
          m("div", {class: "card-content"},
            m("div", {class: "content has-text-centered"},
              m("p",
                [
                  m("a", {id: "btcprice", class: "button is-success", value: "hmmm"}, "$" + "hmmm"),
                  m("h6",
                    [
                      m("br"),
                      "You can use ",
                      m("a", {href: "https://coinmarketcap.com/api/", target: "_blank"}, "coinmarketcap.com"),
                      "'s API"
                    ]
                  )
                ]
              )
            )
          ),
          m("footer", {class: "card-footer"},
            m("a",
              {
                class: "card-footer-item button",
                onclick: App.get_bitcoin_price
              },
              "Update Bitcoin Price"
            )
          )
        ]
      )
   ];
  },
  
  get_bitcoin_price: function ()
  {
    return m.request(
      {
        method: "GET",
        url: "https://api.coinmarketcap.com/v1/ticker/bitcoin/"
      }
    ).then(
      function (items)
      {
        // What are we storing and where?
      }
    ).catch(
      function ()
      {
        // Do something sane on failure
      }
    );
  }
  
};

var Task1 = {
  view: function ()
  {
    return App.task1();
  }
};

var Task2 = {
  view: function ()
  {
    return App.task2();
  }
};

var Task3 = {
  view: function ()
  {
    return App.task3();
  }
};

var Bonus1 = {
  view: function ()
  {
    return App.bonus1();
  }
};

m.mount(document.getElementById("task1"), Task1);
m.mount(document.getElementById("task2"), Task2);
m.mount(document.getElementById("task3"), Task3);
m.mount(document.getElementById("bonus1"), Bonus1);