First commit

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

.gitignore

@@ -0,0 +1,4 @@
+build
+dist
+node_modules
+worknotes

.h5pignore

@@ -0,0 +1,18 @@
+build
+node_modules
+reports
+tests
+dev
+src
+.idea
+.git
+.babelrc
+.gitmodules
+.h5pignore
+.travis.yml
+karma.conf.js
+webpack.config.js
+README.md
+CONTRIBUTING.md
+package.json
+worknotes

.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+node_js:
+  - "stable"
+
+cache:
+  directories:
+    - node_modules
+
+# Google Chrome
+#
+# https://github.com/travis-ci/travis-ci/issues/272#issuecomment-14402117
+# http://stackoverflow.com/questions/19255976/how-to-make-travis-execute-angular-tests-on-chrome-please-set-env-variable-chr
+#
+before_install:
+  - export CHROME_BIN=chromium-browser
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start

CONTRIBUTING.md

@@ -0,0 +1,4 @@
+Please check out existing repo issues, and the issues in this document.
+Create new issues in the repository if it doesn't exist or collaborate with
+others if it already exists.
+Create a pull request with test coverage for the issue :)

README.md

@@ -0,0 +1,22 @@
+# h5p-survey
+
+[![Build Status](https://travis-ci.org/h5p/h5p-survey.svg?branch=master)](https://travis-ci.org/h5p/h5p-survey)
+
+A H5P library for creating interactive surveys.
+
+## Getting started
+
+Grab all the modules and build the project:
+```javascript
+npm start
+```
+
+Run tests:
+```javscript
+npm test
+```
+
+Set up development server with test data:
+```javascript
+npm run dev
+```

karma.conf.js

@@ -0,0 +1,86 @@
+// Karma configuration
+// Generated on Fri Aug 05 2016 15:01:10 GMT+0200 (Vest-Europa (sommertid))
+var path = require('path');
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'tests/**/*.js'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+      'tests/**/*.js': ['webpack']
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+    webpack: {
+      module: {
+        loaders: [
+          {
+            test: /\.js$/,
+            include: [
+              path.resolve(__dirname, "tests"),
+              path.resolve(__dirname, "src/scripts")
+            ],
+            loader: 'babel'
+          }
+        ]
+      },
+    },
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome', 'Firefox'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+};

library.json

@@ -0,0 +1,14 @@
+{
+  "title": "Simple Multi Choice",
+  "description": "Create a simple multiple choice",
+  "majorVersion": 1,
+  "minorVersion": 0,
+  "patchVersion": 0,
+  "runnable": 1,
+  "author": "thomasmars",
+  "license": "MIT",
+  "machineName": "H5P.SimpleMultiChoice",
+  "preloadedJs": [
+    {"path": "dist/dist.js"}
+  ]
+}

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "simpleMultipleChoice",
+  "version": "1.0.0",
+  "description": "Create lightweight multiple choice for use inside content types",
+  "scripts": {
+    "test": "karma start",
+    "testdev": "karma start --autoWatch --no-single-run",
+    "build": "webpack --progress -p",
+    "dev": "webpack -d && webpack-dev-server -d --inline --hot --open"
+  },
+  "keywords": [
+    "lightweight",
+    "multiple choice",
+    "h5p",
+    "library"
+  ],
+  "author": "thomasmars",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.6.5",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-react": "^6.11.1",
+    "coveralls": "^2.11.9",
+    "css-loader": "^0.23.1",
+    "exports-loader": "^0.6.3",
+    "expose-loader": "^0.7.1",
+    "file-loader": "^0.9.0",
+    "h5p-view": "^1.0.0",
+    "imports-loader": "^0.6.5",
+    "jasmine-core": "^2.4.1",
+    "json-loader": "^0.5.4",
+    "karma": "^1.1.2",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-webpack": "^1.7.0",
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.12.14"
+  }
+}

semantics.json

@@ -0,0 +1,34 @@
+[
+  {
+    "name": "question",
+    "label": "Question",
+    "type": "text"
+  },
+  {
+    "name": "inputType",
+    "label": "Multiple choice type",
+    "type": "select",
+    "options": [
+      {
+        "label": "Checkbox",
+        "value": "checkbox"
+      },
+      {
+        "label": "Radiobox",
+        "value": "radio"
+      }
+    ]
+  },
+  {
+    "name": "alternatives",
+    "label": "Answer alternatives",
+    "type": "list",
+    "entity": "Alternative",
+    "min": 2,
+    "field": {
+      "name": "alternative",
+      "label": "Alternative",
+      "type": "text"
+    }
+  }
+]

src/content/devCheck.json

@@ -0,0 +1,9 @@
+{
+  "question": "What do you like the most ?",
+  "inputType": "checkbox",
+  "alternatives": [
+    "Fish",
+    "Turtles",
+    "Icecream"
+  ]
+}

src/content/devRadio.json

@@ -0,0 +1,9 @@
+{
+  "question": "What do you like the most ?",
+  "inputType": "radio",
+  "alternatives": [
+    "Fish",
+    "Turtles",
+    "Icecream"
+  ]
+}

src/entries/dev.js

@@ -0,0 +1,8 @@
+import 'expose?H5P!exports?H5P!h5p-view';
+import SimpleMultiChoice from '../scripts/simple-multiple-choice';
+
+var paramsCheck = require('../content/devCheck.json');
+var paramsRadio = require('../content/devRadio.json');
+
+new SimpleMultiChoice(paramsCheck).attach(H5P.jQuery('<div>').appendTo(H5P.jQuery('body')));
+new SimpleMultiChoice(paramsRadio).attach(H5P.jQuery('<div>').appendTo(H5P.jQuery('body')));

src/entries/dist.js

@@ -0,0 +1,2 @@
+// Load library
+H5P.SimpleMultiChoice = require('../scripts/simple-multiple-choice').default;

src/scripts/simple-multiple-choice.js

@@ -0,0 +1,108 @@
+let instanceId = 0;
+
+export default class SimpleMultiChoice extends H5P.EventDispatcher {
+
+  /**
+   * Constructor for survey
+   * @param {Object} params
+   * @param {string} params.question Question text
+   * @param {string} params.inputType Checkbox or radio
+   * @param {Array} params.alternatives Array of strings with answers alternatives
+   * @param {number} contentId
+   */
+  constructor(params, contentId = null) {
+    super();
+    this.params = params;
+
+    // Provide a unique identifier for each multi choice
+    this.uniqueName = 'h5p-simple-multiple-choice-' + instanceId;
+    instanceId += 1;
+
+    // Keep track of the state
+    this.state = this.params.alternatives.map((alt, i) => {
+      return {
+        id: i,
+        text: alt,
+        checked: false
+      }
+    });
+  }
+
+  /**
+   * Attach library to wrapper
+   * @param {jQuery} $wrapper
+   */
+  attach($wrapper) {
+    const element = document.createElement('div');
+    element.className = 'h5p-simple-multiple-choice';
+    const question = this.createQuestion();
+    question.className = 'h5p-simple-multiple-choice-question';
+    element.appendChild(question);
+
+    const altList = this.createAlternativesList(this.params.alternatives);
+    element.appendChild(altList);
+
+    $wrapper.get(0).appendChild(element);
+  }
+
+  /**
+   * Create html for multiple choice
+   * @return {HTMLElement} html for multiple choice
+   */
+  createQuestion() {
+    const question = document.createElement('div');
+    question.textContent = this.params.question;
+    return question;
+  }
+
+  /**
+   * Handle input changed, trigger event for listeners
+   * @param {number} inputIndex Index of input element that changed
+   */
+  handleInputChange(inputIndex) {
+    this.state = this.state.map((alt, j) => {
+      let checked = j === inputIndex;
+      if (this.params.inputType !== 'radio') {
+        checked = j === inputIndex ? !alt.checked : alt.checked;
+      }
+
+      // Immutable state
+      return Object.assign({}, alt, {
+        checked: checked
+      });
+    });
+
+    this.trigger('changed', this.state);
+  }
+
+  /**
+   * Create alternatives for multiple choice
+   * @param {Array.<string>} alternatives Answer alternatives
+   * @return {HTMLElement} html for alternatives list items
+   */
+  createAlternativesList(alternatives) {
+    const altList = document.createElement('ul');
+    altList.className = 'h5p-simple-multiple-choice-alternatives';
+    alternatives.forEach((alt, i) => {
+
+      // Elements
+      const listItem = document.createElement('li');
+      const label = document.createElement('label');
+      const input = document.createElement('input');
+
+      // Input attributes
+      input.type = this.params.inputType;
+      input.name = this.uniqueName;
+
+      // Label attributes
+      label.addEventListener('change', this.handleInputChange.bind(this, i));
+      label.appendChild(input);
+      label.innerHTML += alt;
+
+      listItem.appendChild(label);
+      altList.appendChild(listItem);
+    });
+
+    return altList;
+  }
+}