babe-project - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

package.json

 {
   "name": "babe-project",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Basic Architecture for Browser-based experiments (https://github.com/babe-project)",
@@ -5,0 +5,0 @@ "main": "babe-main.js",

README.md

@@ -6,3 +6,3 @@ # \_babe project
 
-#### Option 1: Download the \_babe project package
+### Option 1: Download the \_babe project package
 
@@ -13,33 +13,31 @@ 1. Download the [\_babe .zip](https://github.com/babe-project/babe-base)
 
-Your experiment's structure should look something like this:
-`experiment/`
-    + `libraries/`
-        + `babe-babe-master`
-            + `_babe.full.min.js`
-            + `_babe.min.js`
-            + ...
-            + ...
+ Your experiment's structure should look something like this:
 
-`_babe.full.min.js` includes the dependencies that \_babe uses (jQuery, Mustache and csv-js).
-Using `_babe.full.min.js` there is no need to install and import jQuery, Mustache and csv-js.
+    experiment/
+        + libraries/
+            + babe-babe-master
+                + \_babe.full.min.js
+                + \_babe.min.js
+                + ...
+                + ...
 
-`_babe.min.js` includes only the \_babe package, the dependencies should be installed separately for \_babe to work
+ `_babe.full.min.js` includes the dependencies that \_babe uses (jQuery, Mustache and csv-js). There is no need to install and import jQuery, Mustache and csv-js.
 
-3. Import \_babe in your `index.html`:
+ `_babe.min.js` includes only the \_babe package, the dependencies should be installed separately for \_babe to work.
 
-3.1 the full version:
-`<script src="libraries/babe-base-master/_babe.full.min.js></script>"`
+3. Import \_babe in your `index.html`
 
-3.2 no-dependencies version:
-`<script src="libraries/babe-base-master/_babe.full.min.js></script>"`
+ the full version:
+`<script src="libraries/babe-base-master/_babe.full.min.js></script>`
 
-Note: You need to install jQuery, Mustache and csv-js in your experiment.
+ no-dependencies version:
+`<script src="libraries/babe-base-master/_babe.min.js></script>`
 
 4. Use \_babe styles:
 
-import \_babe-styles in your `index.html`:
+ import \_babe-styles in your `index.html`:
 
-`<link rel="stylesheet" type="text/css" href="libraries/babe-base-master/_babe-styles.css">`
+ `<link rel="stylesheet" type="text/css" href="libraries/babe-base-master/_babe-styles.css">`
 
-#### Option 2: Install with npm
+### Option 2: Install with npm
 
@@ -52,6 +50,12 @@ You need npm installed on your machine. Here is more information on how to [install npm](https://www.npmjs.com/get-npm)
 
-Import \_babe, jQuery, Mustache and csv-js in your main .html
+Dependencies:
 
+ + jQuery
+ + Mustache
+ + csv-js
+
+Include \_babe in your main `.html` file:
+
 ```
-<link rel="stylesheet" type="text/css" href="node_modules/babe-project/_babe-styles.css">
+<link rel="stylesheet" type="text/css"  href="node_modules/babe-project/_babe-styles.css">
 
@@ -61,3 +65,3 @@ <script src="node_modules/mustache/mustache.min.js"></script>
 <script src="node_modules/csv-js/csv.js"></script>
-<script src="node_modules/babe-project/_babe.min.js></script>"
+<script src="node_modules/babe-project/_babe.min.js></script>
 ```
@@ -69,7 +73,9 @@
 
+Use `_babeInit()` to create a \_babe experiment.
+
 `_babeInit` takes an object as a parameter with the following properties:
 
-* `views_seq` - a list of view objects in the sequence you want the to appear in your experiment
-* `deploy` - an object with information about the deploy methods of your experiment 
-* `progress_bar` - an object with information about the progress bars in the views of your experiment
+* `views_seq` - a list of view objects in the sequence you want them to appear in your experiment. [more info](https://github.com/babe-project/babe-base#views-in-_babe)
+* `deploy` - an object with information about the deploy methods of your experiment. [more info](https://github.com/babe-project/babe-base#deploy-configuration)
+* `progress_bar` - an object with information about the progress bars in the views of your experiment. [more info](https://github.com/babe-project/babe-base#progress-bar)
 
@@ -106,3 +112,3 @@
 });
- ```
+```
 
@@ -141,22 +147,22 @@ ### Views in \_babe
 
-#### \_babe's ready-made views
+#### \_babe views
 
-\_babe provides several ready-made views which you can use by importing them in `your_js_file.js`.
+\_babe provides several ready-made views which you can access form the `_babeViews` object.
 
 * trial type views:
-    * `forcedChoice` - [binary forced-choice task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#forced-choice-binary-choice-task)
-    * `sliderRating` - [slider rating task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#slider-rating-task)
-    * `textboxInput` [textbox input task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#textbox-input-task)
-    * `dropdownMenu` - [dropdown menu task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#dropdown-choice-task)
-    * `ratingScale` - [Likert-scale rating task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#rating-scale-task)
-    * `sentenceSelection` - [text selection task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#sentence-selection-task)
-    * `imageSelection` - [click-on-a-picture task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#image-selection-task)
-    * `keyPress`- press a [button task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#key-press-task)
+    * `_babeViews.forcedChoice` - [binary forced-choice task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#forced-choice-binary-choice-task)
+    * `_babeViews.sliderRating` - [slider rating task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#slider-rating-task)
+    * `_babeViews.textboxInput` [textbox input task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#textbox-input-task)
+    * `_babeViews.dropdownMenu` - [dropdown menu task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#dropdown-choice-task)
+    * `_babeViews.ratingScale` - [Likert-scale rating task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#rating-scale-task)
+    * `_babeViews.sentenceSelection` - [text selection task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#sentence-selection-task)
+    * `_babeViews.imageSelection` - [click-on-a-picture task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#image-selection-task)
+    * `_babeViews.keyPress`- press a [button task](https://github.com/babe-project/babe-base/blob/master/docs/views.md#key-press-task)
 
 * other views:
-    * `intro`  - introduction view 
-    * `instructions`-  instructions view
-    * `begin` - begin experiment view; can be used between the practice and the main view
-    * `postTest` - post-experiment questionnaire
-    * `thanks` - the last view that handles the submission of the results of creates a table with the results in 'Debug Mode'
+    * `_babeViews.intro`  - introduction view 
+    * `_babeViews.instructions`-  instructions view
+    * `_babeViews.begin` - begin experiment view; can be used between the practice and the main view
+    * `_babeViews.postTest` - post-experiment questionnaire
+    * `_babeViews.thanks` - the last view that handles the submission of the results of creates a table with the results in 'Debug Mode'
 
@@ -239,30 +245,83 @@
 
-!!!
+You can also create your own views.
 
-You can also create your own views. Here is what you need to know:
+The views are functions that return an object with the following properties:
 
-The view is an object that has the following properties:
-
 * `trials: number` - the number of trials this view appears
-* `CT: 0` - current trial, always starts from 0, ??
-* `name: string` - the name of the view ??
+* `CT: 0` - current trial, always starts from 0
+* `name: string` - the name of the view (the progress bar uses the name)
 * `render: function` - a function that renders the view
+    * pass `CT` and `_babe` as parameters to render()
 
-`for the trial type views`
+Add the data gathered from your custom trial type views to `_babe.trial_data`
 
-* pass `CT` as a parameter to render()
-* add the trial info for this trial and the gathered data to the trial data
 
+Sample custom trial type view:
 
-Sample custom view:
+```
+_babeViews.pressTheButton = function(config) {
+    const _pressTheButton = {
+        name: config.name,
+        title: config.title,
+        render(CT, _babe) {
+            let startTime = Date.now();
 
+            const viewTemplate =
+            `<div class='view'>
+                {{# title }}
+                <h1 class="title">{{ title }}</h1>
+                {{/ title }}
+                <button id="the-button">Press me!</button>
+            </div>`;
+
+            $("#main").html(
+                Mustache.render(viewTemplate, {
+                    title: this.title
+                })
+            );
+
+            $('#the-button').on('click', function(e) {
+                _babe.trial_data.push({
+                    trial_type: config.trial_type,
+                    trial_number: CT+1,
+                    RT: Date.now() - startTime
+                });
+                _babe.findNextView();
+            });
+        },
+        CT: 0,
+        trials: config.trials
+    };
+
+    return _pressTheButton;
+};
+
+const mainTrial = _babeViews.pressTheButton({
+    name: 'buttonPress',
+    title: 'How quickly can you press this button?',
+    trial_type: 'main',
+    trials: 1
+});
+
+$("document").ready(function() {
+    _babeInit({
+        ...
+        views_seq: [
+            ...
+            mainTrial,
+            ...
+        ],
+        ...
+    });
+});
 ```
-// your_js_file.js
 
-const sayHello = function(info) {
-    const sayHello = {
-        name: info.name,
-        title: info.title,
-        text: info.text,
-        render() {
+Sample custom info view:
+
+```
+_babeViews.sayHello = function(config) {
+    const _sayHello = {
+        name: config.name,
+        title: config.title,
+        render(CT, _babe) {
             const viewTemplate =
@@ -273,9 +332,3 @@ `<div class='view'>
                 {{/ title }}
-                {{# text }}
-                <section class="text-container">
-                <p class="text">{{ text }}</p>
-                </section>
-                {{/ text }}
-                <button id="hello-back">Hello to you, too!</button>
-                <button id="next" class="nodisplay">Bye!</button>
+                <button id="hello-button">Hello back!</button>
             </div>`;
@@ -285,28 +338,20 @@
                 Mustache.render(viewTemplate, {
-                    title: this.title,
-                    text: this.text
+                    title: this.title
                 })
             );
 
-            $('#hello-back').on('click', function(e) {
-                $('#next').removeClass('nodisplay');
-                $('.text').addClass('nodisplay');
-                e.target.classList.add('nodisplay');
+            $('#hello-button').on('click', function(e) {
+                _babe.findNextView();
             });
-
-            $('#next').on('click', function() {
-                findNextView();
-            })
         },
         CT: 0,
-        trials: info.trials
+        trials: config.trials
     };
 
-    return sayHello;
+    return _sayHello;
 };
 
-const mySayHello = sayHello({
-    name: 'sayHello',
-    title: 'Hello',
-    text: 'I am here just to say Hello..',
+const hello = _babeViews.sayHello({
+    name: 'buttonPress',
+    title: 'Hello!?',
     trials: 1
@@ -320,3 +365,3 @@ });
             ...
-            mySayHello,
+            hello,
             ...
@@ -323,0 +368,0 @@ ],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

401

increased by12.64%

Worsened metrics

Total package byte prevSize

506811

decreased by-0.54%

Number of package files

23

decreased by-4.17%

No dependency changes