This wiki page details how to fully create an experiment.
To learn how to create an experiment, you first need to know how Vue.js works.
If you want to use the same style as the application, here is the Vuetify documentation.
This is a more experiment-focused file tree.
The complete /src
directory file tree can be found here: Application file tree - /src
directory.
└── src ||
├── components || Common components
│ └── ExperimentsComponents || Experiment-specific components
│ ├── ExtractConfiguration.vue || Extracts configurator
│ └── ExtractsToImage.vue || Shows multiple extracts as a unique image
├── functions.js || Common utils
├── mixins || Experiments bases: contains utils for a type of experiment
│ ├── ExperimentBaseAreSameImages.vue || Images versus based experiment base
│ ├── ExperimentBaseExtracts.vue || Extracts-based experiment base
│ └── ExperimentBase.vue || Global experiment base, used in every experiments
├── router || Vue-router (routing logic)
│ ├── experiments.js || Experiment-specific routing logic
│ └── index.js || Main routing logic
└── views || Application views (pages)
└── Experiments || Experiments
├── AreSameImagesRandom.vue || Two random quality images (versus)
├── AreSameImagesReferenceOneExtract.vue || Two reference images, one has a random quality extract (versus)
├── AreSameImagesReference.vue || One random quality image, one reference image (versus)
└── MatchExtractsWithReference.vue || Lowest quality extracts, match them to reference image
When creating an experiment
<YourExperimentName>.vue
file in the /src/views/Experiments
directoryCreate a new entry in the /src/router/experiments.js
file following this structure:
{
path: '/experiments/YourExperimentName/:sceneName',
name: 'YourExperimentName',
component: () => import('@/views/Experiments/YourExperimentName'),
props: true,
meta: {
fullName: 'The visible name of your experiment'
}
}
TODO: finish this part
An experiment mixin is a subset of functions or data that can be used in a type of experiment.
Copy the minimal experiment template /src/views/Experiments/_template.vue
content to your new experiment.
You are all set! You can now develop your own experiment.
See Experiment mixins API to check data and methods available from your selected parent mixins using the this
keyword in any Vue methods/templates.
TODO: finish this part
File: /src/mixins/ExperimentBase.vue
Extends: []
This mixin is mandatory. If you want to create a new mixin, use this mixin in your mixin.
When drawing the tree from top mixins to the experiment itself, ExperimentBase
must be the very top parent.
Data | Type | Default | Description |
---|---|---|---|
loadingMessage |
String |
null |
Message to display while loading the application. null = not loading |
loadingErrorMessage |
String |
null |
Message to display when the application failed to load. null = no loading errror |
qualities |
Number[] |
null |
List of qualities for the current scene |
Method | Return type | Description |
---|---|---|
loadProgress() |
void |
Load progress from store into local state |
saveProgress() |
void |
Save progress from local state into store |
loadConfig() |
void |
Load a config object into the local state |
finishExperiment() |
void |
Finish an experiment, sending full data to the server . Don't forget to surcharge this function when using this mixin to add more data! |
getQualitiesList() |
Promise<void> |
Load qualities list from the API |
getImage(quality: Number) |
Promise<Object> |
Load an image from the API |
sendMessage({ msgId: String, msg: Object }) |
void |
Send a message using /experimentCollect API route, your message will be stored in the database. Message IDs are listed in /config.messageId.js |
setExperimentFinished([done=true: Boolean]) |
void |
Set the current experiment as finished in the browser's cache |
File: /src/mixins/ExperimentBaseAreSameImages.vue
Extends: [ExperimentBase]
Data | Type | Default | Description |
---|---|---|---|
maxTestCount |
Number |
null |
The total number of tests to pass for this scene |
testCount |
Number |
1 |
Passed tests count |
image1 |
Object |
null |
One of the two images |
image2 |
Object |
null |
One of the two images |
Method | Return type | Description |
---|---|---|
scrollToChoiceButtons() |
void |
Scroll the page to the answer buttons |
getTest(leftQuality: Number, rightQuality: Number) |
Promise<Object> |
Load a test using provided qualities |
areTheSameAction(areTheSame: Boolean, getTestFn: Function, additionalData: any) |
Promise<Object> |
Answer to the versus. getTestFn shoud be an async function that returns an object matching { image1: Object, image2: Object } . additionalData is the experiment-specific content you want to send to the database |
finishExperiment() |
void |
Finish an experiment |
File: /src/mixins/ExperimentBaseExtracts.vue
Extends: [ExperimentBase]
Data | Type | Default | Description |
---|---|---|---|
extractConfig |
Object |
{ x=null: Number, y=null: Number } |
Used configuration to cut the image |
extracts |
Object[] |
[] |
List of extracts of the cutted image |
extractsInfos |
Object |
null |
Informations on the cutted image |
showHoverBorder |
Boolean |
null |
Should the extracts be hoverable (white rectangle around the extract) |
lockConfig |
Boolean |
null |
Should the extract configuration be editable |
Method | Return type | Description |
---|---|---|
`getExtracts([quality='min']: Number | String)` | Promise<Object> |
setExtractConfig(config: Object, [configuratorRef: Object]) |
Promise<Object> |
Change the extract configuration. It loads the new extracts. config is the new extracts configuration to use. If configuratorRef is provided, it will extract the extracts configurator |
extractAction(event: MouseEvent, extractObj: Object) |
Promise<void> |
Used when clicking on an extract. event is the mouse event (left/right click). extractObj is the object corresponding to the clicked extract (from the extracts array) |
getExtractFullObject(extractsApiObj: Object) |
Promise<Object> |
Takes the API image extracts response and apply more data to the extracts (like next/prec quality, zone, index or full link to image) |
getClickDataObject(event, extractObj, action) |
Object |
Calculate data on clicked event. Will get the click position on the responsive image, calculate the ratio to the real-sized image. It returns the full message sent when clicking on an extract |
finishExperiment() |
void |
Finish an experiment sending final experiment data |