Skip to content

Added a button that the user can click to toggle between placing emoj…#9

Open
htsukamoto5 wants to merge 1 commit into
mainfrom
emoji-vowel-toggle-button
Open

Added a button that the user can click to toggle between placing emoj…#9
htsukamoto5 wants to merge 1 commit into
mainfrom
emoji-vowel-toggle-button

Conversation

@htsukamoto5
Copy link
Copy Markdown

…is and vowels on the screen

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 26, 2026

🦋 Changeset detected

Latest commit: 336d52e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@jspsych/plugin-emoji-screen Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a mode toggle button to the @jspsych/plugin-emoji-screen plugin so participants can switch between placing emojis and vowels on the click canvas. The trial data format is generalized from emoji-specific to a more general "symbol" shape, and the simulation logic is updated to match.

Changes:

  • Introduces new vowels and mode plugin parameters and a click-driven toggle button that updates the prompt and mode.
  • Renames the output data from emoji_locations: [{x, y, emoji}] to symbol_locations: [{x, y, symbol, mode}] and the DOM attribute data-emoji to data-symbol.
  • Updates simulation (create_simulation_data / visual simulation) to produce and replay mixed emoji/vowel sequences.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File Description
packages/plugin-emoji-screen/src/index.ts Adds vowel/mode parameters, mode toggle button, renames data/attribute fields, updates simulation.
packages/plugin-emoji-screen/examples/index.html Updates example prompt text to mention the mode-switch button and drops explicit emojis override.
.changeset/thirty-onions-eat.md New minor changeset describing the toggle feature.
.changeset/brave-lions-arrive.md Duplicate minor changeset for the same feature.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

let currentMode: "emoji" | "vowel" = trial.mode as "emoji" | "vowel";
modeButton.textContent = currentMode === "emoji" ? "Switch from Emojis to Vowels" : "Switch from Vowels to Emojis";
modeButton.addEventListener("click", () => {
event.stopPropagation(); // Prevent the click from placing an emoji when toggling modes
},
/** The mode of the trial. Valid values are "emoji" or "vowel". */
mode: {
type: ParameterType.STRING,
Comment on lines +46 to 50
/** Array of objects describing each placed symbol: {x, y, symbol, mode}. x and y are pixel coordinates relative to the canvas. */
symbol_locations: {
type: ParameterType.COMPLEX,
array: true,
},
Comment on lines +1 to +5
---
"@jspsych/plugin-emoji-screen": minor
---

Added a button that the user can click to toggle between placing emojis or vowels on the screen
Comment on lines +23 to +33
/** The pool of vowels to randomly select from when the participant clicks. */
vowels: {
type: ParameterType.STRING,
array: true,
default: ["a", "e", "i", "o", "u"],
},
/** The mode of the trial. Valid values are "emoji" or "vowel". */
mode: {
type: ParameterType.STRING,
default: "emoji",
},
Comment on lines +108 to +114
modeButton.addEventListener("click", () => {
event.stopPropagation(); // Prevent the click from placing an emoji when toggling modes
currentMode = currentMode === "emoji" ? "vowel" : "emoji";
modeButton.textContent = currentMode === "emoji" ? "Switch from Emojis to Vowels" : "Switch from Vowels to Emojis";
promptDiv.innerHTML = currentMode === "emoji"
? "<p>Click anywhere to place emojis. Use the button to switch to vowels. Press <strong>Enter</strong> when done.</p>"
: "<p>Click anywhere to place vowels. Use the button to switch to emojis. Press <strong>Enter</strong> when done.</p>";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants