content.js

/* global module, require, console */
/* jshint globalstrict: true */
'use strict';

let Content = {

  click_for_points: {
    instructions: "This is an example of how automatically graded assignments appear on this course. Always <strong>carefully read assignment instruction</strong> before starting to do anything. At this time there is no problem to solve. You are just expected to click the button on left to receive your first points.",
    html: "<button class=\"green\">Click Me!</button>",
    selector: ".exercise button",
    events: "click",
    points: function ($element, config, event) {
      return {
        points: 10,
        feedback: 'Congratulations!'
      };
    },
    maxPoints: 10,
    title: "Click for points",
    description: "An example of how these assignments work",
    concepts: ["Automatic assessment"],
    order: 0
  },

  fix_typo: {
    instructions: "On the left you see a message that unfortunately contains a typo. Your task is to open the browser inspector tool, find the paragraph element <strong>&lt;p&gt;</strong> containing the message and then edit the element body to correctly contain the intended message \"<strong>Hello World!</strong>\".",
    html: "<div class=\"acos-webdev-poi\"><p>Hello Wordl!</p></div>",
    mutations: true,
    points: function ($element, config, mutations) {
      let $p = $element.find('.exercise p');
      if ($p.length != 1) {
        return {
          points: 0,
          feedback: 'The document is altered beyond repair. Avoid accidentally removing nodes. You should reset the assignment to start over.'
        };
      } else if ($p.eq(0).text() != 'Hello Wordl!') {
        if ($p.eq(0).text() != 'Hello World!') {
          return {
            points: 5,
            feedback: 'Almost there! You were able to change the node contents but the message is not exactly as requested.'
          };
        } else {
          return {
            points: 10,
            feedback: 'Great work! You were able to change the node contents as requested.'
          };
        }
      }
      return undefined;
    },
    maxPoints: 10,
    title: "Fix typo",
    description: "Find and change element body",
    concepts: ["Inspector", "DOM", "HTML"],
    order: 1
  },

  change_color: {
    instructions: "The blue area on left contains barely visible text. Your task is to use the browser inspector tool to locate the paragraph element <strong>&lt;p&gt;</strong> containing the barely visible text and then add a CSS property to apply another <strong>color</strong>. <em>Note that editing existing CSS rules does not grade the exercise.</em>",
    html: "<div class=\"acos-webdev-poi\"><p class=\"blue\">The quick brown fox jumps over the lazy dog's back.</p></div>",
    mutations: true,
    points: function ($element, config, mutations) {
      let $p = $element.find('.exercise p');
      if ($p.length != 1) {
        return {
          points: 0,
          feedback: 'The document is altered beyond repair. Avoid accidentally removing nodes. You should reset the assignment to start over.'
        };
      } else if (!config.graded && $p.eq(0).css('color') != 'rgb(173, 216, 230)') {
        config.graded = true;
        return {
          points: 10,
          feedback: 'Excellent! You changed the color of that text.'
        };
      }
      return undefined;
    },
    maxPoints: 10,
    title: "Change text color",
    description: "Find and change text color using CSS",
    concepts: ["Inspector", "DOM", "CSS"],
    order: 2
  },

  disabled_button: {
    instructions: "You need to click the button on left to receive your points on this assigment. Too bad that the button is disabled. Your task is to use the browser inspector tool to locate the <strong>button</strong>, remove the <strong>disabled</strong> attribute and finally click it.",
    html: "<button class=\"green\" disabled>Click Me!</button>",
    selector: ".exercise button",
    events: "click",
    points: function ($element, config, event) {
      return {
        points: 10,
        feedback: 'Congratulations!'
      };
    },
    maxPoints: 10,
    title: "Disabled button",
    description: "Find and enable button",
    concepts: ["Inspector", "DOM", "HTML"],
    order: 3
  },

  console_command: {
    instructions: "This time the area on left does not have any visible content. However, this exercise defines a JavaScript function that can grant you points. Your task is to use the browser console to call the function like this: <code>giveMePoints();</code>",
    html: "<div id=\"events\"></div>",
    script: function giveMePoints() {
      document.getElementById('events').dispatchEvent(new Event('grade'));
    },
    selector: "#events",
    events: "grade",
    points: function ($element, config, event) {
      return {
        points: 10,
        feedback: 'Congratulations!'
      };
    },
    maxPoints: 10,
    title: "Console command",
    description: "Call function in browser console",
    concepts: ["Console", "JavaScript"],
    order: 4
  }

};

module.exports = Content;