Add keyboard key style to jspsych.css - #3708
Merged
Merged
Conversation
Add a `.jspsych-display-element .key` / `kbd` style to jspsych.css so experiment authors can render text as a keycap in instructions, e.g. `press <span class="key">space</span>`. Documents the new style in the CSS overview page and adds a minimal standalone example. Note: packages/jspsych/css/jspsych.css is a generated build artifact (gitignored since 60f4d86) and was rebuilt locally to verify the new rule compiles correctly, but is not committed. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Wrap specific key names in <span class="key"> throughout the examples/ demo files so instruction text renders as a keycap using the new jspsych-display-element .key CSS style. Generic phrasing like "any key", "a key", "the wrong key", "the other key", and "the correct key" is left untouched, as are choices arrays, plugin parameters, logic code, and code comments. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 9c058c5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
📦 Preview build readyBuilt from PR head Changed packages: Quick-start HTML: <script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@218bccb14ff37b8763ae2d0d1aa13a94f1900ef5/packages/jspsych/dist/index.browser.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@218bccb14ff37b8763ae2d0d1aa13a94f1900ef5/packages/jspsych/css/jspsych.css">
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@218bccb14ff37b8763ae2d0d1aa13a94f1900ef5/packages/plugin-html-keyboard-response/dist/index.browser.min.js"></script>All package URLs
Last updated 2026-07-22 15:45 UTC for PR head |
Wrap specific key names (F, J) in <span class="key"> inside the rt-task tutorial's experiment code blocks, so the instructions render as keycaps when readers run the code. Applied identically across all repeated/grown copies of the code block through the tutorial's steps. Left the tutorial prose (outside code blocks) and generic phrasing like "press any key" untouched, since the docs site doesn't load jspsych.css. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Convert the <span class="key"> wraps added in the previous tutorial commit to <kbd> elements, the semantic HTML tag for keyboard input, which jspsych.css already styles as a keycap. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Convert the <span class="key"> / <span class='key'> wraps added in the examples/ sweep (commit 97a602f) to <kbd> elements, the semantic HTML tag for keyboard input. The CSS already styles both selectors, so class="key" remains a supported alternative and is left untouched in the CSS rule. - examples/*: 126 <span class="key">/<span class='key'> wraps converted to <kbd>, removing the quoting concerns from mixed single/double-quoted JS strings. - examples/keyboard-key-style.html: <kbd> is now the primary usage shown, with one trial demonstrating that <span class="key"> still works as an alternative. - docs/overview/style.md: leads with <kbd> as the semantic element, mentions class="key" as an equivalent alternative. - .changeset/keyboard-key-css.md: updated wording to lead with <kbd>. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Wrap specific key names in <kbd> throughout docs/demos/ experiment code, so instructions render as keycaps when a reader opens the demo. Generic phrasing like "any key" and "the wrong/other key" is left untouched, as are choices arrays, plugin parameters, and third-party code. Several plugin doc pages (docs/plugins/*.md) duplicate a demo's code inline (in addition to iframing the live demo), so those inline code blocks were updated identically to keep both copies consistent: audio-keyboard-response.md, canvas-keyboard-response.md, categorize-animation.md, categorize-html.md, image-keyboard-response.md, reconstruction.md, same-different-html.md, same-different-image.md, and visual-search-circle.md. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
jadeddelta
requested changes
Jul 22, 2026
jadeddelta
left a comment
jadeddelta
left a comment
Contributor
There was a problem hiding this comment.
worth addressing the one point I gave, but everything else looks spick and span
Rename the .key helper class to .jspsych-key so it follows the .jspsych-* naming convention used by every other class in the stylesheet, per review feedback. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
jadeddelta
approved these changes
Jul 22, 2026
jadeddelta
left a comment
jadeddelta
left a comment
Contributor
There was a problem hiding this comment.
fixed up two things for you, it looks good to go!
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
Adds a CSS style to jspsych.css for rendering text as a keyboard key, so instruction text can mark up key names as visual keycaps using the semantic
<kbd>element:An element with
class="key"(e.g.<span class="key">space</span>) is styled identically, as an alternative for cases where<kbd>isn't convenient. The rule is scoped under.jspsych-display-elementso it can't leak into a hosting page. The design matches the existing.jspsych-btnpalette, with a bottom box-shadow for keycap depth. No capitalization styling is applied — authors control how key names are cased.Changes
packages/jspsych/src/index.scss: new.jspsych-display-element kbd, .jspsych-display-element .keyrule (verified the webpackbuild:stylesoutput picks it up).docs/overview/style.md: short note documenting the style in "Tips for working with CSS".examples/keyboard-key-style.html: minimal demo,<kbd>-first with oneclass="key"alternative trial.examples/sweep: 31 example files updated so instruction text naming a specific key uses<kbd>(126 wraps). Generic phrases ("press any key"), code/comments, third-party JS, and button-response labels were left untouched.docs/tutorials/rt-task.md: the F/J key mentions in the tutorial's code samples use<kbd>, kept identical across all repeated code blocks; tutorial prose untouched (the docs site doesn't load jspsych.css).docs/demos/+docs/plugins/sweep: 11 demo experiment files updated (23 wraps), plus the 9 plugin doc pages that duplicate those demos' code inline in their "Code" tabs, kept in sync (23 more wraps).jspsych.🤖 Generated with Claude Code