Skip to content
Permalink
Browse files

v1.3: Added support for setDistribution.

  • Loading branch information...
QuentinAndre committed Jul 30, 2019
1 parent ba9ea3e commit a602bb18dcd11b9020cd94528ab5ff722efe68b9
@@ -3,7 +3,12 @@ A Javascript library to conveniently add distribution builders to your online an

## Changelog:

### v1.2 (master)
### v1.3 (master)
* Added method: `DistributionBuilder.setDistribution()`. This function is useful if you want the user to start from
a pre-specified distribution. Thanks to Roy Hsieh for the suggestion!


### v1.2
* Minor changes to CSS to enhance compatibility with Qualtrics.
* distBuilder has been rewritten in Typescript. This does not affect the behavior of the library in any
way, but makes it easier for developers to build more complex apps on top of distBuilder.

Large diffs are not rendered by default.

BIN +154 Bytes (100%) distributionbuilder.zip
Binary file not shown.

Large diffs are not rendered by default.

@@ -64,9 +64,10 @@ <h2>A. Why distBuilder?</h2>
distribution builders easy and accessible to researchers. The library is user-friendly, and requires very
little programming knowledge to be used.</p>
<h2>B. Citing distBuilder</h2>
<p>You can cite distBuilder using its <a href="https://doi.org/10.5281/zenodo.166736">Digital Object Identifier (DOI)</a>.</p>
<p>You can cite distBuilder using its <a href="https://doi.org/10.5281/zenodo.166736">Digital Object Identifier
(DOI)</a>.</p>
<h2>C. About the author</h2>
<p>This library was developed by <strong>Quentin Andre</strong>, an assistant professor of Marketing at
<p>This library is developed by <strong>Quentin André</strong>, an assistant professor of Marketing at
Rotterdam School of Management, Erasmus University, the Netherlands. If you have any comment, feedback
or suggestion regarding this library or its documentation,
please let me know at <a href="mailto:andre@rsm.nl">andre@rsm.nl</a> or use GitHub issues.</p>
@@ -258,7 +259,7 @@ <h2>B. Render </h2>
</code></pre>
</div>
<h2>C. Labelize</h2>
<p>Finally, you generally want to add some labels to the buckets of your distribution builder:</p>
<p>You generally want to add some labels to the buckets of your distribution builder:</p>
<p><code>DistributionBuilder.labelize()</code></p>
<p>By default, the Distribution Builder automatically creates evenly spaced labels, using the distance between
the minimum and maximum value and the number of buckets using the following code:</p>
@@ -302,8 +303,32 @@ <h2>C. Labelize</h2>
});
</code></pre>
</div>
<h1>5. Changing the Distribution</h1>
<p>By default, respondents will start from an empty distribution (i.e. zero balls in all buckets).</p>
<p>However, you might want to specify a different starting distribution, or change the current distribution
to a specific value. To do so, you can use the method:</p>
<p><code>DistributionBuilder.setDistribution(dist)</code></p>
<p>Here is an example:</p>
<div class="highlight">
<pre><code class="language-javascript">var distbuilder = new DistributionBuilder({
nRows: 10,
nBuckets: 10,
minVal: 0,
maxVal: 100,
nBalls: 60
});
distbuilder.render();
distbuilder.labelize(});
var dist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
distbuilder.setDistribution(dist);
</code></pre>
</div>
<div class="bs-example">
<div id="targetdiv4" style="width:100%; margin: 0 auto;"></div>
</div>


<h1>5. Reading the Data</h1>
<h1>6. Reading the Data</h1>
<p>After setting up the Distribution Builder, its internal state can be conveniently accessed through three
methods:</p>
<ul>
@@ -331,7 +356,7 @@ <h2>A. Number of balls allocated</h2>
<div class="bs-example">
<div id="BallsLeft"></div>
<div id="BallsAllocated" style="text-align: right"></div>
<div id="targetdiv4" style="width:100%; margin: 0 auto;"></div>
<div id="targetdiv5" style="width:100%; margin: 0 auto;"></div>
</div>
<div class="highlight">

@@ -375,7 +400,7 @@ <h2>B. Validating the distribution</h2>
<div style="text-align: center;margin-bottom: 3px;">
<a class="btn btn-default" id="SubmitDistribution1" disabled=true> Submit Distribution </a>
</div>
<div id="targetdiv5" style="width:100%; margin: 0 auto;"></div>
<div id="targetdiv6" style="width:100%; margin: 0 auto;"></div>
</div>

<div class="highlight">
@@ -407,7 +432,7 @@ <h2>C. Accessing the distribution</h2>
<div style="text-align: center;margin-bottom: 3px;">
<a class="btn btn-default" id="SubmitDistribution2" disabled=true> View Distribution </a>
</div>
<div id="targetdiv6" style="width:100%; margin: 0 auto;"></div>
<div id="targetdiv7" style="width:100%; margin: 0 auto;"></div>
</div>

<div class="highlight">
@@ -456,7 +481,7 @@ <h2>D. Storing the data in Qualtrics</h2>
<div style="text-align: center;margin-bottom: 3px;">
<a class="btn btn-default" id="SubmitDistribution3" disabled=true> Store Distribution in Qualtrics </a>
</div>
<div id="targetdiv7" style="width:100%; margin: 0 auto;"></div>
<div id="targetdiv8" style="width:100%; margin: 0 auto;"></div>
</div>

<div class="highlight">
@@ -484,7 +509,8 @@ <h2>D. Storing the data in Qualtrics</h2>
alert(message)
});</code></pre>
</div>
<h1>6. CSS Specification</h1>

<h1>7. CSS Specification</h1>
<p>If you want to customize the appearance of the distribution builder, the full list of classes defined by the
stylesheet can be found in the <code>distributionbuilder.css</code> file.</p>
<p> The following CSS tree will help you understand the mapping between the CSS classes and the way the
@@ -531,10 +557,10 @@ <h1>6. CSS Specification</h1>
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<h1>7. About</h1>
<h1>8. About</h1>
<p>distBuilder is published under the <a
href="https://github.com/QuentinAndre/DistributionBuilder/blob/master/LICENSE" target="_blank">MIT
license</a>. The code is written in the Typescript, and is transpiled in legacy code
license</a>. The code is written in Typescript, and is transpiled in legacy code
for cross-browsers compatibility. It is developed upon the <a href="https://jquery.com/" target="_blank">jQuery</a>
library, and uses some elements of <a href="http://getbootstrap.com/getting-started/" target="_blank">Bootstrap</a>
for styling.</p>
@@ -555,10 +581,10 @@ <h1>7. About</h1>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
@@ -38,7 +38,8 @@ declare class DistributionBuilder {
labelize(o: LabelizeConfigObject): void;
isComplete(): boolean;
getRemainingBalls(): number;
getDistribution(): number[];
getDistribution(): Array<number>;
setDistribution(dist: Array<number>): void;
_setLabels(labels: Array<string>): void;
_actionCreator(action: ValidButtonAction): Function;
_createGrid($target: JQuery<HTMLElement>): JQuery<HTMLElement>;

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -1,6 +1,6 @@
{
"name": "distbuilder",
"version": "1.2.0",
"version": "1.3.0",
"description": "A distribution builder for economic and psychology experiments. Based on Goldstein and Rothschild's 2014 paper 'Lay understanding of probability distributions'.",
"main": "index.js",
"scripts": {
@@ -62,10 +62,23 @@ $j(document).ready(function () {
suffix: ''
});

var distbuilder4 = new DistributionBuilder({
minVal: 0,
maxVal: 100,
nRows: 10,
nBuckets: 10,
nBalls: 60
});
var dist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
distbuilder4.render("targetdiv4");
distbuilder4.labelize();
distbuilder4.setDistribution(dist);


var n_balls = 10;
$j('#BallsLeft').text("You have " + n_balls + " balls left.");
$j('#BallsAllocated').text("You have allocated " + 0 + " balls.");
var distbuilder4 = new DistributionBuilder({
var distbuilder5 = new DistributionBuilder({
minVal: 0,
maxVal: 100,
nRows: 10,
@@ -81,10 +94,10 @@ $j(document).ready(function () {
}
});

distbuilder4.render("targetdiv4");
distbuilder4.labelize({});
distbuilder5.render("targetdiv5");
distbuilder5.labelize({});

var distbuilder5 = new DistributionBuilder({
var distbuilder6 = new DistributionBuilder({
minVal: 0,
maxVal: 100,
nRows: 10,
@@ -98,13 +111,13 @@ $j(document).ready(function () {
}
}
});
distbuilder5.render("targetdiv5");
distbuilder5.labelize({});
distbuilder6.render("targetdiv6");
distbuilder6.labelize({});
$j("#SubmitDistribution1").click(function () {
alert("Distribution Validated!")
});

var distbuilder6 = new DistributionBuilder({
var distbuilder7 = new DistributionBuilder({
minVal: 0,
maxVal: 100,
nRows: 10,
@@ -118,13 +131,14 @@ $j(document).ready(function () {
}
}
});
distbuilder6.render("targetdiv6");
distbuilder6.labelize({});
distbuilder7.render("targetdiv7");
distbuilder7.labelize({});
$j("#SubmitDistribution2").click(function () {
var message = "The distribution specified by the user is: " + distbuilder6.getDistribution();
var message = "The distribution specified by the user is: " + distbuilder7.getDistribution();
alert(message)
});
var distbuilder7 = new DistributionBuilder({

var distbuilder8 = new DistributionBuilder({
minVal: 0,
maxVal: 100,
nRows: 10,
@@ -138,11 +152,11 @@ $j(document).ready(function () {
}
}
});
distbuilder7.render("targetdiv7");
distbuilder7.labelize({});
distbuilder8.render("targetdiv8");
distbuilder8.labelize({});
$j("#SubmitDistribution3").click(function () {
var message = 'The function "Qualtrics.SurveyEngine.setEmbeddedData("MyDistributionResult", ';
message += distbuilder7.getDistribution().join() + ')" was called. Your data would have been stored in Qualtrics!';
message += distbuilder8.getDistribution().join() + ')" was called. Your data would have been stored in Qualtrics!';
alert(message)
});

@@ -123,10 +123,33 @@ class DistributionBuilder {
return this.remainingBalls;
}

getDistribution() {
getDistribution(): Array<number> {
return this.distribution.slice();
}

setDistribution(dist: Array<number>): void {
if (dist.length != this.nBuckets) {
throw ("The length of the entered distribution does not match the number of buckets")
}

let sumVals = dist.reduce((a, b) => a+b);
if (sumVals > this.nBalls) {
throw ("The number of balls in the distribution exceeds the number of balls.")
}

let maxVal = dist.reduce((a, b) => a >= b ? a : b);
if (maxVal > this.nRows) {
throw ("The number of balls in one or several buckets is greater than the number of rows.")
}
dist.map(
(i, j) => this._$target.find(".distrow > .col" + j).slice(this.nRows-i, this.nRows).map(
(a, x) => $j(x).addClass("filled")
)
);
this.distribution = dist;
this.remainingBalls = this.remainingBalls - sumVals;
}

_setLabels(labels: Array<string>): void {
labels.forEach((l, i) => {
let label = this._$target.find('.label' + i);

0 comments on commit a602bb1

Please sign in to comment.
You can’t perform that action at this time.