diff --git a/runestone/activecode/css/activecode.css b/runestone/activecode/css/activecode.css index 2b0a4b03f..a0cf7d50d 100644 --- a/runestone/activecode/css/activecode.css +++ b/runestone/activecode/css/activecode.css @@ -116,3 +116,16 @@ .ac-disabled { pointer-events: none; } + +.ac_output pre.ac-code-changed { + background: initial; + animation: flash-background 1s; +} +@keyframes flash-background { + 0% { + background: rgba(255, 255, 0, 0.3); + } + 100% { + background: initial; + } +} diff --git a/runestone/activecode/js/activecode.js b/runestone/activecode/js/activecode.js index b3780416c..d9adfe7e8 100755 --- a/runestone/activecode/js/activecode.js +++ b/runestone/activecode/js/activecode.js @@ -671,10 +671,22 @@ ActiveCode.prototype.buildProg = function() { return prog; }; +ActiveCode.prototype.flashBackground = function() { + // Provide a visual cue that the code was re-run, as I was getting feedback + // that, when restructuring code that shouldn't have changed output, they + // were worried about whether the program had actually run again. + this.output.classList.remove('ac-code-changed'); + // reflow to ensure that the class removal is synced to DOM + void this.output.offsetWidth; + // add .ac-code-changed to trigger background animation + this.output.classList.add('ac-code-changed'); +}; + ActiveCode.prototype.runProg = function() { var prog = this.buildProg(); $(this.output).text(''); + this.flashBackground(); $(this.eContainer).remove(); Sk.configure({output : this.outputfun.bind(this),