Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
babe-project
Advanced tools
babe-project - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
@@ -6,14 +6,2 @@ // import {updateProgress} from "./babe-progress-bar.js"; | ||
| // // prepare information about trials (procedure) | ||
| // _babe.trial_info = { | ||
| // practice_trials: { | ||
| // forcedChoice: _.shuffle(practice_trials.forcedChoice), | ||
| // sliderRating: practice_trials.sliderRating | ||
| // }, | ||
| // main_trials: { | ||
| // forcedChoice: _.shuffle(main_trials.forcedChoice), | ||
| // sliderRating: main_trials.sliderRating | ||
| // } | ||
| // }; | ||
| const submitResults = function() { | ||
@@ -50,5 +38,2 @@ return submit(_babe.trial_data, _babe.global_data, _babe.deploy); | ||
| // renders the first view from experiment.js | ||
| // findNextView(); | ||
| export {findNextView, submitResults}; |
@@ -11,5 +11,23 @@ import { findNextView, submitResults } from "./babe-main.js"; | ||
| render: function() { | ||
| const viewTemplate = $( | ||
| "#intro-view" | ||
| ).html(); | ||
| const viewTemplate = | ||
| `<div class='view'> | ||
| {{# title }} | ||
| <h1 class="title">{{ title }}</h1> | ||
| {{/ title }} | ||
| {{# text }} | ||
| <section class="text-container"> | ||
| <p class="text">{{ text }}</p> | ||
| </section> | ||
| {{/ text }} | ||
| <p id="prolific-id-form"> | ||
| <label for="prolific-id">Please, enter your Prolific ID</label> | ||
| <input type="text" id="prolific-id" /> | ||
| </p> | ||
| {{# button }} | ||
| <button id="next" class="nodisplay">{{ button }}</button> | ||
| {{/ button }} | ||
| {{^ button }} | ||
| <button id="next" class="nodisplay">Begin Experiment</button> | ||
| {{/ button }} | ||
| </div>`; | ||
@@ -73,3 +91,17 @@ $("#main").html( | ||
| render: function() { | ||
| const viewTemplate = $("#instructions-view").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| {{# title }} | ||
| <h1>{{ title }}</h1> | ||
| {{/ title }} | ||
| {{# text }} | ||
| <section class="text-container"> | ||
| <p class="text">{{ text }}</p> | ||
| </section> | ||
| {{/ text }} | ||
| {{# button }} | ||
| <button id="next">{{ button }}</button> | ||
| {{/ button }} | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -101,3 +133,12 @@ Mustache.render(viewTemplate, { | ||
| render: function () { | ||
| const viewTemplate = $('#begin-exp-view').html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| {{# text }} | ||
| <section class="text-container"> | ||
| <p class="text">{{ text }}</p> | ||
| </section> | ||
| {{/ text }} | ||
| <button id="next">Begin Experiment</button> | ||
| </div>`; | ||
| $('#main').html(Mustache.render(viewTemplate, { | ||
@@ -125,3 +166,20 @@ title: this.title, | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-buttons-response").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| <div class="picture", align = "center"> | ||
| <img src={{picture}} alt="a picture" height="100" width="100"> | ||
| </div> | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{ question }} | ||
| {{/ question }} | ||
| </p> | ||
| <p class="answer-container buttons-container"> | ||
| <label for="yes" class="button-answer">{{ option1 }}</label> | ||
| <input type="radio" name="answer" id="yes" value={{ option1 }} /> | ||
| <input type="radio" name="answer" id="no" value={{ option2 }} /> | ||
| <label for="no" class="button-answer">{{option2}}</label> | ||
| </p> | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -156,3 +214,3 @@ Mustache.render(viewTemplate, { | ||
| option2: | ||
| config.data.option2, | ||
| config.data[CT].option2, | ||
| option_chosen: $("input[name=answer]:checked").val(), | ||
@@ -176,3 +234,20 @@ RT: RT | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-slider-response").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| <div class="picture", align = "center"> | ||
| <img src={{ picture }} alt="a picture" height="100" width="100"> | ||
| </div> | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{ question }} | ||
| {{/ question }} | ||
| </p> | ||
| <p class="answer-container slider-container"> | ||
| <span class="unnatural">{{ option1 }}</span> | ||
| <input type="range" id="response" class="slider-response" min="0" max="100" value="50"/> | ||
| <span class="natural">{{ option2 }}</span> | ||
| </p> | ||
| <button id="next" class="nodisplay">Next</button> | ||
| </div>`; | ||
| let response; | ||
@@ -231,3 +306,20 @@ $("#main").html( | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-textbox-input").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{/ question }} | ||
| {{ question }} | ||
| </p> | ||
| {{# picture }} | ||
| <div class="picture", align = "center"> | ||
| <img src={{ picture }} alt="picture" height="100" width="100"> | ||
| </div> | ||
| {{/ picture }} | ||
| <p class="answer-container"> | ||
| <textarea name="textbox-input" rows=10 cols=50 class="textbox-input" /> | ||
| </p> | ||
| <button id="next" class="nodisplay">next</button> | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -281,3 +373,37 @@ Mustache.render(viewTemplate, { | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-dropdown-response").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| <div class="picture", align = "center"> | ||
| <img src={{ picture }} alt="a picture" height="100" width="100"> | ||
| </div> | ||
| {{# question }} | ||
| <p class="answer-container dropdown-container"> | ||
| <p class="question"> | ||
| {{ question }} | ||
| <select id="response" name="answer"> | ||
| <option disabled selected></option> | ||
| <option value={{ option1 }}>{{ option1 }}</option> | ||
| <option value={{ option2 }}>{{ option2 }}</option> | ||
| </select> | ||
| </p> | ||
| <button id="next" class="nodisplay">Next</button> | ||
| </p> | ||
| {{/ question }} | ||
| {{# questionLeftPart }} | ||
| <p class="answer-container dropdown-container"> | ||
| <p class="question"> | ||
| {{ questionLeftPart }} | ||
| <select id="response" name="answer"> | ||
| <option disabled selected></option> | ||
| <option value={{ option1 }}>{{ option1 }}</option> | ||
| <option value={{ option2 }}>{{ option2 }}</option> | ||
| </select> | ||
| {{ questionRightPart }} | ||
| </p> | ||
| <button id="next" class="nodisplay">Next</button> | ||
| </p> | ||
| {{/ questionLeftPart }} | ||
| </div>`; | ||
| let response; | ||
@@ -337,3 +463,35 @@ $("#main").html( | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-rating-response").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| {{# picture }} | ||
| <div class="picture", align = "center"> | ||
| <img src={{ picture }} alt="picture" height="100" width="100"> | ||
| </div> | ||
| {{/ picture }} | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{ question }} | ||
| {{/ question }} | ||
| </p> | ||
| <p class="answer-container buttons-container"> | ||
| <strong>{{ option1 }}</strong> | ||
| <label for="1" class="rating-answer">1</label> | ||
| <input type="radio" name="answer" id="1" value="1" /> | ||
| <label for="2" class="rating-answer">2</label> | ||
| <input type="radio" name="answer" id="2" value="2" /> | ||
| <label for="3" class="rating-answer">3</label> | ||
| <input type="radio" name="answer" id="3" value="3" /> | ||
| <label for="4" class="rating-answer">4</label> | ||
| <input type="radio" name="answer" id="4" value="4" /> | ||
| <label for="5" class="rating-answer">5</label> | ||
| <input type="radio" name="answer" id="5" value="5" /> | ||
| <label for="6" class="rating-answer">6</label> | ||
| <input type="radio" name="answer" id="6" value="6" /> | ||
| <label for="7" class="rating-answer">7</label> | ||
| <input type="radio" name="answer" id="7" value="7" /> | ||
| <strong>{{ option2 }}</strong> | ||
| </p> | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -379,3 +537,24 @@ Mustache.render(viewTemplate, { | ||
| render: function(CT) { | ||
| var viewTemplate = $("#trial-view-sentence-choice").html(); | ||
| var viewTemplate = | ||
| `<div class="view"> | ||
| {{# picture }} | ||
| <div class="picture" align = "center"> | ||
| <img src={{ picture }} alt="picture" height="100" width="100"> | ||
| </div> | ||
| {{/ picture }} | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{ question }} | ||
| {{/ question }} | ||
| </p> | ||
| <p class="answer-container buttons-container"> | ||
| <label for="1" class="sentence-selection">{{ option1 }}</label> | ||
| <input type="radio" name="answer" id="1" value="{{ option1 }}"/> | ||
| <label for="2" class="sentence-selection">{{ option2 }}</label> | ||
| <input type="radio" name="answer" id="2" value="{{ option2 }}"/> | ||
| </p> | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -423,3 +602,18 @@ Mustache.render(viewTemplate, { | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-image-selection").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{ question }} | ||
| {{/ question }} | ||
| </p> | ||
| <p class="answer-container imgs-container"> | ||
| <label for="img1" class="img-answer"><img src={{ picture1 }} alt="picture" height="100" width="100"></label> | ||
| <input type="radio" name="answer" id="img1" value={{ option1 }} /> | ||
| <input type="radio" name="answer" id="img2" value={{ option2 }} /> | ||
| <label for="img2" class="img-answer"><img src={{ picture2 }} alt="picture" height="100" width="100"></label> | ||
| </p> | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -474,5 +668,20 @@ Mustache.render(viewTemplate, { | ||
| render: function(CT) { | ||
| const viewTemplate = $("#trial-view-key-press").html(); | ||
| const viewTemplate = | ||
| `<div class="view"> | ||
| <h3>{{ key1 }} = {{ value1 }}, {{ key2 }} = {{ value2 }}</h3> | ||
| <p class="question"> | ||
| {{# question }} | ||
| {{/ question }} | ||
| {{ question }} | ||
| </p> | ||
| {{# picture }} | ||
| <div class="picture", align = "center"> | ||
| <img src={{ picture }} alt="picture" height="100" width="100"> | ||
| </div> | ||
| {{/ picture }} | ||
| </div>`; | ||
| const key1 = config.data[CT].key1; | ||
| const key2 = config.data[CT].key2; | ||
| $("#main").html( | ||
@@ -564,3 +773,53 @@ Mustache.render(viewTemplate, { | ||
| render: function() { | ||
| const viewTemplate = $("#post-test-view").html(); | ||
| const viewTemplate = | ||
| `<div class="view post-test-templ"> | ||
| {{# title }} | ||
| <h1>{{ title }}</h1> | ||
| {{/ title }} | ||
| {{# text }} | ||
| <section class="text-container"> | ||
| <p class="text">{{ text }}</p> | ||
| </section> | ||
| {{/ text }} | ||
| <form> | ||
| <p> | ||
| <label for="age">Age:</label> | ||
| <input type="number" name="age" min="18" max="110" id="age" /> | ||
| </p> | ||
| <p> | ||
| <label for="gender">Gender:</label> | ||
| <select id="gender" name="gender"> | ||
| <option></option> | ||
| <option value="male">male</option> | ||
| <option value="female">female</option> | ||
| <option value="other">other</option> | ||
| </select> | ||
| </p> | ||
| <p> | ||
| <label for="education">Level of Education:</label> | ||
| <select id="education" name="education"> | ||
| <option></option> | ||
| <option value="graduated_high_school">Graduated High School</option> | ||
| <option value="graduated_college">Graduated College</option> | ||
| <option value="higher_degree">Higher Degree</option> | ||
| </select> | ||
| </p> | ||
| <p> | ||
| <label for="languages" name="languages">Native Languages: <br /><span>(i.e. the language(s) spoken at home when you were a child)</</span></label> | ||
| <input type="text" id="languages"/> | ||
| </p> | ||
| <p class="comment-sect"> | ||
| <label for="comments">Further comments</label> | ||
| <textarea name="comments" id="comments" | ||
| rows="6" cols="40"></textarea> | ||
| </p> | ||
| {{# buttonText }} | ||
| <button id="next">{{ buttonText }}</button> | ||
| {{/ buttonText }} | ||
| {{^ buttonText }} | ||
| <button id="next">Next</button> | ||
| {{/ buttonText }} | ||
| </form> | ||
| </div>`; | ||
| $("#main").html( | ||
@@ -607,3 +866,17 @@ Mustache.render(viewTemplate, { | ||
| render: function() { | ||
| var viewTemplate = $("#thanks-view").html(); | ||
| var viewTemplate = | ||
| `<div class="view thanks-templ"> | ||
| <h4 class="warning-message">submitting the data | ||
| <div class="loader"></div> | ||
| </h4> | ||
| {{# thanksMessage }} | ||
| <h1 class="thanks-message nodisplay">{{ thanksMessage }}</h1> | ||
| {{/ thanksMessage }} | ||
| {{^ thanksMessage }} | ||
| <h1 class="thanks-message nodisplay">Thank you for taking part in this experiment!</h1> | ||
| {{/ thanksMessage }} | ||
| {{# extraMessage }} | ||
| <h2 class="extra-message nodisplay">{{{ extraMessage }}}</h2> | ||
| {{/ extraMessage }} | ||
| </div>`; | ||
@@ -610,0 +883,0 @@ // what is seen on the screen depends on the used deploy method |
| { | ||
| "name": "babe-project", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Basic Architecture for Browser-based experiments (https://github.com/babe-project)", | ||
@@ -5,0 +5,0 @@ "main": "babe-main.js", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by20.02%
66491
- Lines of code
- increased by17.25%
1652
No dependency changes