babe-project
Advanced tools
Basic Architecture for Browser-based experiments (https://github.com/babe-project)
Babe Project
Dependencies
Development dependencies (optional)
Installation with npm
Installation
make a directory for your experiment
in the terminal do
mkdir sample-experiment
go to the directory
`cd sample-experiment`
check whether you have npm installed on your machine
in the terminal do
npm --version
if nothing gets printed install npm (link to how to install npm)
if you already have npm
create an npm module
`npm init` (press next next next..)
install the babe project package with npm
`npm install babe-project`
check whether babe-project has been installed
in the terminal
`ls node_modules`
should have node_modules
create your project in your sample-experiment folder create an html file (for example 'index.html')
what is html (link to some explanation)
`touch index.html`
build your html file yourself
OBLIGATORY
- For the project to work there must be a tag (link what is an html tag) (preferrably `div` or `main`) with `id='main'`
OPTIONAL
- you can import babe-styles.css in the head
- you can import fonts
or copy the minimal structure below in your html file
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>browser-based experiments</title>
<!-- fonts from Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Noto+Serif:400,700|Playfair+Display:700" rel="stylesheet">
<!-- css -->
<link rel="stylesheet" type="text/css" href="node_modules/babe-project/babe-styles.css">
<!-- js dependencies -->
<script src="node_modules/mustache/mustache.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/csv-js/csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>
</head>
<body>
<noscript>This task requires JavaScript. Please enable JavaScript in your browser and reload the page. For more information on how to do that, please refer to
<a href='https://enable-javascript.com' target='_blank'>enable-javascript.com</a>
</noscript>
<!-- views are inserted in main -->
<main id='main'>
Loading...
</main>
</body>
</html>
```
create a js file for example index.js
in sample-experiment
`touch index.js`
link the `index.js` in your html file by adding the following in the head of the html file.
JS dependencies must be listed above the local js file.
```
<script type="module" src="index.js"></script>
```
Open index.js
sample index.js (link)
on the top of the file import the babe creation funtion to create the experiment
import { babeInit } from './node_modules/babe-project/babe-init.js';
babeInit is a function that takes as arguments:
views_seq - a list of view creation functions (more info about views),
deploy - an object with info about the deploy method that has the following keys (keys here),
progress_bar - an object that gives info about the progress bar that has the fillowing keys
you can use some ready-made babe-project views (more info)
import the views and config them with texts and more info
or create your own views
if you create your own
- view is an object that has a render() - takes (trial info) and trials
minimal view structure (can be used as a base)
progress_bar = {
in - a list of t
}
FAQs
Basic Architecture for Browser-based experiments (https://github.com/babe-project/babe-project)
We found that babe-project demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.