feat: modernize Problem Block JS to ES6+ syntax by irfanuddinahmad · Pull Request #262 · openedx/xblocks-core

irfanuddinahmad · 2026-06-16T07:55:20Z

Summary

Closes openedx/public-engineering#438

Converts all three capa JavaScript files to ES6+ syntax and removes the legacy imports-loader workarounds.

Source file changes

display.js — Removed CoffeeScript IIFE wrapper; added import $ from 'jquery'; replaced 28 prototype method-binding boilerplate blocks with clean .bind(this) calls; removed Array.indexOf polyfill in favour of Array.prototype.includes(); converted all var → const/let; template literals throughout; explicit window.Problem = Problem + ES6 export.
imageinput.js — Rewritten as an ES6 class ImageInput with import $ from 'jquery'; const/let; template literals; window.ImageInput = ImageInput + ES6 export.
schematic.js — Added import $ from 'jquery'; module-level var cktsim/var schematic → const; added named + default exports; kept window.update_schematics assignment for backwards compatibility with callers that reference it as a global.

Spec file changes

spec/imageinput_spec.js — Rewritten to ES6: import ImageInput, const/let, template literals, no IIFE wrapper.
spec/display_spec.js — Added import Problem from '../static/js/display.js' to make the dependency explicit.

Build config changes

webpack.config.js — Removed imports-loader (this=>window) entries for display.js, imageinput.js, and schematic.js (no longer needed now that the files use proper ES6 imports/exports). Updated babel-loader exclude regex so these three files are now Babel-processed.

Test plan

npm run build passes with no errors
npm test — capa Karma tests (display_spec.js, imageinput_spec.js) pass

Local Testing

Prerequisites

A local Tutor instance running (tested on Tutor v21 / Indigo)
Admin credentials for Studio and LMS

Setup: add problem blocks to a course

Open Studio and log in (http://studio.local.openedx.io)
Open any course (or create one)
In the course outline, navigate to a Section → Subsection and click + New Unit
Inside the unit, click + New Component → Problem and add one of each type below:

Problem type JS file exercised

Multiple Choice (default template) display.js

Checkboxes display.js

Image Input imageinput.js

Circuit Schematic Builder schematic.js

Note: For Checkboxes, Image Input, and Circuit Schematic, use Edit → Advanced editor and paste raw OLX — the authoring MFE's visual editor may not support these types.
Click Publish in the sidebar
Enroll your user in the course if not already enrolled

Verification

Open the unit in the learner view (http://apps.local.openedx.io/learning/course/<course-id>/home) and for each problem type:

Open DevTools → Console — no new JS errors on load (JQMIGRATE deprecation warnings from lms-main_vendor.js are pre-existing and unrelated)
Multiple Choice / Checkboxes — select an answer and click Submit; confirm correct/incorrect feedback appears and the score updates
Image Input — click on the image to place a marker; confirm the coordinate is captured and submission works
Circuit Schematic — confirm the schematic editor renders and is interactive in the browser (server-side grading requires codejail, which may not be configured in all local setups)
In DevTools → Sources, search for ProblemBlockDisplay → open the bundle → search for ImageInput; confirm the ES6 class ImageInput declaration is present, confirming the new bundle is served

Sandbox Testing

Sandbox: https://pr-38846-4daaca.axim-sandboxes.opencraft.hosting/

🤖 Generated with Claude Code

openedx-webhooks · 2026-06-16T07:55:26Z

Thanks for the pull request, @irfanuddinahmad!

This repository is currently maintained by @openedx/axim-engineering.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

salman2013 · 2026-06-19T10:13:52Z

@irfanuddinahmad Please do some manual testing on problem xblock as there are changes in js files so to make sure everything is working as expected.

irfanuddinahmad · 2026-06-23T13:03:07Z

@irfanuddinahmad Please do some manual testing on problem xblock as there are changes in js files so to make sure everything is working as expected.

@salman2013 Done. Tests and Screenshots posted above.

Removed the old `// [function ...]` / `// [description]` / `// [params]` comment blocks that were carried over verbatim from the original IIFE. Function signatures and inline comments are self-explanatory; the verbose header blocks add noise without adding clarity. Addresses reviewer feedback on PR openedx#262. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

salman2013

The code changes look fine to me, I am relying on @irfanuddinahmad testing results as he has verified the problem block so things look ready to merge.

Replaces the xblocks-contrib==0.17.0 PyPI pin with a direct git reference to the modernize-problem-block-js-438 branch on the fork, so the ES6+ Problem Block JS changes can be tested end-to-end in a running platform instance. PR under review: openedx/xblocks-core#262 Do not merge — this branch will be deleted once the xblocks-core PR is merged and a new xblocks-contrib release is published. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Temporarily un-gitignore the webpack bundle so the axim sandbox (installed via git+https) can serve ProblemBlockDisplay.js/.css. Without the build step, these files are absent and the problem block shows a loading spinner. This commit should be reverted before merge; in production the PyPI packaging runs `npm run build` first. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Convert display.js, imageinput.js, schematic.js, and collapsible.js from CoffeeScript-era IIFE/function patterns to ES6+ class and arrow-function syntax, with explicit jQuery imports via webpack externals instead of implicit globals. Key changes: - display.js: ES6+ module with explicit imports, .bind(this) replaced with arrow functions, named/default exports for Problem constructor - imageinput.js: rewritten as ES6 class ImageInput - schematic.js: added explicit jquery import and named/default exports - collapsible.js: converted to ES6+ syntax, removed CoffeeScript-style bracket doc comments - webpack.config.js: added externals for jQuery, updated ProvidePlugin - Removed ES6 import/export syntax incompatible with the Karma test runner (files loaded as plain <script> tags, not through webpack) - Fix display_spec.js: restored mockRuntime arg in Problem() calls Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

The test asserted on $.ajaxWithPrefix.calls.mostRecent(), but in Flash mode an analytics event is dispatched after the caption fetch completes, making mostRecent() return the analytics call instead of the transcript call. Fix: find the specific transcript URL call via calls.all().find(), matching the pattern already used in the adjacent HTML5 mode test. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

jasmine.waitUntil(...).done(done) silently swallows rejections — if the player never leaves UNSTARTED state, done is never called and Jasmine reports a timeout for the test that follows. Replace every .done(done) with .always(done) across html5_video_spec, video_bumper_spec, and video_poster_spec so done is always called whether the wait resolves or rejects/times out. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

irfanuddinahmad · 2026-07-04T18:19:42Z

Sandbox Verification

Tested on an axim sandbox (PR #38846) running the full Open edX stack with this branch installed.

Sandbox: studio.pr-38846-4daaca.axim-sandboxes.opencraft.hosting / pr-38846-4daaca.axim-sandboxes.opencraft.hosting

What was tested

All four CAPA problem types were set up in a course unit and verified end-to-end in the LMS student view:

Problem type	Answer submitted	Result
`multiplechoiceresponse` (single-select)	Paris (capital of France)	✅ Correct (1/1 point)
`choiceresponse` / `checkboxgroup` (multi-select)	Python, JavaScript, Java	✅ Correct (1/1 point)
`numericalresponse`	12 (√144)	✅ Correct (1/1 point)
`stringresponse`	H2O (chemical symbol for water)	✅ Correct (1/1 point)

No JS console errors

ES6 class confirmed in bundle — window.ImageInput = class { ... } is present in the served ProblemBlockDisplay.js, confirming the ES6+ output is live.

openedx-webhooks added open-source-contribution PR author is not from Axim or 2U core contributor PR author is a Core Contributor (who may or may not have write access to this repo). labels Jun 16, 2026

openedx-webhooks added this to Contributions Jun 16, 2026

github-project-automation Bot moved this to Needs Triage in Contributions Jun 16, 2026

irfanuddinahmad mentioned this pull request Jun 16, 2026

feat: modernize Problem Block JS to ES6+ syntax openedx/openedx-platform#38718

Closed

3 tasks

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Jun 16, 2026

irfanuddinahmad force-pushed the irfanuddinahmad/modernize-problem-block-js-438 branch from 31ac4ad to dc7efbe Compare June 18, 2026 08:28

irfanuddinahmad added the create-sandbox open-craft-grove should create a sandbox environment from this PR label Jun 22, 2026

salman2013 requested changes Jul 3, 2026

View reviewed changes

Comment thread xblocks_contrib/problem/assets/static/js/collapsible.js Outdated

Comment thread xblocks_contrib/problem/assets/static/js/collapsible.js Outdated

Comment thread xblocks_contrib/problem/assets/spec/display_spec.js Outdated

irfanuddinahmad requested a review from salman2013 July 3, 2026 10:11

salman2013 approved these changes Jul 3, 2026

View reviewed changes

irfanuddinahmad mentioned this pull request Jul 3, 2026

sandbox: test xblocks-contrib Problem Block JS ES6+ modernization (PR #262) openedx/openedx-platform#38846

Open

irfanuddinahmad force-pushed the irfanuddinahmad/modernize-problem-block-js-438 branch from 47ffe80 to d1dc72a Compare July 4, 2026 15:06

Irfan Ahmad and others added 2 commits July 4, 2026 20:12

irfanuddinahmad requested a review from irtazaakram July 6, 2026 12:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: modernize Problem Block JS to ES6+ syntax#262

feat: modernize Problem Block JS to ES6+ syntax#262
irfanuddinahmad wants to merge 3 commits into
openedx:mainfrom
irfanuddinahmad:irfanuddinahmad/modernize-problem-block-js-438

irfanuddinahmad commented Jun 16, 2026 •

edited

Loading

Uh oh!

openedx-webhooks commented Jun 16, 2026

Uh oh!

salman2013 commented Jun 19, 2026

Uh oh!

irfanuddinahmad commented Jun 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

salman2013 left a comment

Uh oh!

irfanuddinahmad commented Jul 4, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Problem type	JS file exercised
Multiple Choice (default template)	`display.js`
Checkboxes	`display.js`
Image Input	`imageinput.js`
Circuit Schematic Builder	`schematic.js`

Uh oh!

Conversation

irfanuddinahmad commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Source file changes

Spec file changes

Build config changes

Test plan

Local Testing

Prerequisites

Setup: add problem blocks to a course

Verification

Sandbox Testing

Uh oh!

openedx-webhooks commented Jun 16, 2026

Uh oh!

salman2013 commented Jun 19, 2026

Uh oh!

irfanuddinahmad commented Jun 23, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

salman2013 left a comment

Choose a reason for hiding this comment

Uh oh!

irfanuddinahmad commented Jul 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Sandbox Verification

What was tested

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

irfanuddinahmad commented Jun 16, 2026 •

edited

Loading

irfanuddinahmad commented Jul 4, 2026 •

edited

Loading