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> <!DOCTYPE html>
<html> <html>
<head>
<head> <title>jsPsychPluginFreeSortOrdered Example</title>
<title>jsPsychPluginFreeSortOrdered Example</title> <script src="https://unpkg.com/jspsych"></script>
<script src="https://unpkg.com/jspsych"></script> <!-- Load the published plugin package here, e.g.
<!-- Load the published plugin package here, e.g.
<script src="https://unpkg.com/plugin-free-sort-ordered"></script> <script src="https://unpkg.com/plugin-free-sort-ordered"></script>
<script src="../dist/index.browser.js"></script> --> <script src="../dist/index.browser.js"></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"> <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css" />
</head> </head>
<body></body> <body></body>
<script> <script>
const jsPsych = initJsPsych(); const jsPsych = initJsPsych();
const trial = { const trial = {
type: jsPsychPluginFreeSortOrdered type: jsPsychPluginFreeSortOrdered,
}; stimuli: [
'<div style="width: 200px; height: 100px; background-color: red;"></div>',
jsPsych.run([trial]) '<div style="width: 200px; height: 100px; background-color: blue;"></div>',
</script> '<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>
</html> </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 { 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 { version } from "../package.json";
import * as Utils from "./utils"; import * as Utils from "./utils";
@ -155,7 +156,7 @@ class FreeSortOrderedPlugin implements JsPsychPlugin<Info> {
// counter text if included // counter text if included
const counter_html = ` const counter_html = `
<p id="jspsych-free-sort-ordered-counter" style="display: inline-block;"> <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>`; </p>`;
// container for the boxes // container for the boxes