some things show up on screen!

This commit is contained in:
cchang-vassar 2025-05-04 23:17:41 -07:00
parent aff11c4291
commit 85ad7d40da
2 changed files with 34 additions and 20 deletions

View File

@ -1,25 +1,38 @@
<!DOCTYPE html>
<html>
<head>
<head>
<title>jsPsychPluginFreeSortOrdered Example</title>
<script src="https://unpkg.com/jspsych"></script>
<!-- Load the published plugin package here, e.g.
<script src="https://unpkg.com/plugin-free-sort-ordered"></script>
<script src="../dist/index.browser.js"></script> -->
<script src="../dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css">
</head>
<link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" />
</head>
<body></body>
<script>
<body></body>
<script>
const jsPsych = initJsPsych();
const trial = {
type: jsPsychPluginFreeSortOrdered
type: jsPsychPluginFreeSortOrdered,
stimuli: [
'<div style="width: 200px; height: 100px; background-color: red;"></div>',
'<div style="width: 200px; height: 100px; background-color: blue;"></div>',
'<div style="width: 200px; height: 100px; background-color: green;"></div>'
],
stim_height: 100,
stim_width: 200,
stim_order: [2, 0, 1],
scale_factor: 1,
holding_area_height: 500,
holding_area_width: 1000,
prompt: 'Drag and drop the boxes to sort them in order.',
prompt_location: 'top',
button_label: 'Continue',
include_counter: true,
};
jsPsych.run([trial])
</script>
</script>
</html>

View File

@ -1,6 +1,7 @@
import * as FreeSortPluginUtils from "@jspsych/plugin-free-sort/src/utils";
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
// import * as FreeSortPluginUtils from "@jspsych/plugin-free-sort/src/utils";
import * as FreeSortPluginUtils from "../../plugin-free-sort/src/utils";
import { version } from "../package.json";
import * as Utils from "./utils";
@ -155,7 +156,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// counter text if included
const counter_html = `
<p id="jspsych-free-sort-ordered-counter" style="display: inline-block;">
${trial.include_counter ? trial.get_counter_text(trial.stimuli.length) : ""}
${trial.include_counter ? get_counter_text(trial.stimuli.length) : ""}
</p>`;
// container for the boxes