Fix/sustainability content updates#241
Open
mparrott-at-wiris wants to merge 1525 commits intoAIModelShare:masterfrom
Open
Fix/sustainability content updates#241mparrott-at-wiris wants to merge 1525 commits intoAIModelShare:masterfrom
mparrott-at-wiris wants to merge 1525 commits intoAIModelShare:masterfrom
Conversation
* Initial plan * Add compact CTA styling and submit button to quiz slides - Added CSS for .points-chip, .quiz-cta, and .quiz-submit styles - Added CSS rule to hide gradient CTA banners on slides > 0 - Updated quiz rendering to include compact chip banner with points message - Added explicit "Submit answer 🧭" button for each quiz - Changed quiz scoring from radio.change to submit button click - Added validation when no option is selected - Preserved existing success/leaderboard update logic Co-authored-by: mparrott-at-wiris <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: mparrott-at-wiris <[email protected]>
The #3 rank placeholder replacement was corrupting CSS hex colors like #34d399 throughout the HTML template. Use a targeted replacement (>#3</div>) that only matches the rank stat display. Also initialize best_score to None instead of 0 and use `is not None` check to correctly distinguish "no submissions" from a 0% accuracy edge case. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Match detective app styling: 2px borders, 16px border-radius, explicit font-family. Secondary buttons get visible borders with accent hover highlight. Forward-action buttons are now larger with flex:1 sizing to match the step 1 CTA prominence. Step 4 final button uses success (green) variant for positive context. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Replace the cramped horizontal rank bar with a 4-column grid of bordered cards with large emoji icons and readable text. Remove the first quiz question (accuracy measurement) leaving only the rank-up question, and update the gate unlock to trigger on the single remaining answer. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Add show_progress="hidden" to all navigation click handlers, arena control change handlers, and demo.load() to suppress the flickering Gradio progress indicator bar. The app already has its own custom loading overlay for navigation. The submit button retains show_progress="full" for intentional experiment progress feedback. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Switch from dark-mode-default to light-mode-default with proper dark mode support via @media query and .dark class fallback. Replace hardcoded hex colors in JS and demo banner with CSS variables for mode-adaptive rendering. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Swap the hidden gr.Accordion for a styled gr.HTML formula box in all 6 detective and fixer sustainability apps (EN/ES/CA). The new design shows the simplified formula [Accuracy] × [Sustainability %] with color-coded spans, matching the challenge app's visual pattern. Co-Authored-By: Claude Opus 4.6 <[email protected]>
* Change formula box to click-to-reveal in detective and fixer apps Wrap the Moral Compass Formula section in a <details><summary> element so it's hidden by default and revealed on click, keeping the same visual styling. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Replace duplicate water "Per Year" card with CO₂ emissions in detective prompt calculator The third stat card was repeating the water metric annualized. Now shows CO₂ emitted per day (0.4g/prompt) with km driven/yr comparison (121g CO₂/km EU avg). Updated en, es, and ca variants. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
* Change formula box to click-to-reveal in detective and fixer apps Wrap the Moral Compass Formula section in a <details><summary> element so it's hidden by default and revealed on click, keeping the same visual styling. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Replace duplicate water "Per Year" card with CO₂ emissions in detective prompt calculator The third stat card was repeating the water metric annualized. Now shows CO₂ emitted per day (0.4g/prompt) with km driven/yr comparison (121g CO₂/km EU avg). Updated en, es, and ca variants. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
* Reframe Fairness Fixer from CTO to City Green AI Advisor
Recast the student's role from "Chief Technology Officer of NovaMind AI"
to "City Green AI Advisor" evaluating NovaMind's data center proposal.
This ties the app back to the student's local city theme from Activity 1
and shifts stakes from corporate to civic ("your city's water, your
city's grid").
All 5 rounds, 3 choices per round, quiz questions, scoring mechanics,
and game engine logic are unchanged — only the narrative framing is
updated across title screen, round briefs/questions, JS feedback text,
spinner message, results/report card, quiz config, leaderboard labels,
and success messages.
Co-Authored-By: Claude Opus 4.6 <[email protected]>
* Simplify Green AI Advisor content for 12-year-old reading level
Rewrite all user-facing text with kid-friendly language, relatable
comparisons (homes powered, swimming pools of water, cars on the road),
and shorter sentences. Replace dense 6-metric stats grid with 2-item
scoreboard (Green Score + Reputation) and sequential post-choice impact
reveal with staggered animations. Simplify all 5 round briefs, 15 choice
labels/descriptions, 15 feedback messages, 6 quiz questions, and results
page. Game engine logic, scoring mechanics, fx values, task IDs, correct
answers, CSS class names, and JS variable names are unchanged.
Co-Authored-By: Claude Opus 4.6 <[email protected]>
* Add live pollution dashboard and climate change callback to Green AI Advisor
Replace abstract Green Score + Reputation scoreboard with a 4-metric
pollution dashboard (families' energy, swimming pools of water, cars'
CO₂, Green Score) that students watch shrink round by round. Reframe
the title screen and rounds as "Your City's Pollution." Add a climate
change callback card on the results page and strengthen certification
text to reference the student's city directly.
Co-Authored-By: Claude Opus 4.6 <[email protected]>
---------
Co-authored-by: Claude Opus 4.6 <[email protected]>
…#235) Mirrors the bias detective's OEIAC info box pattern for the sustainability app: accent-highlighted box introducing the Sustainability principle, plus a collapsible listing the other 6 AI ethics principles. Applied to all three language files (EN/ES/CA) with bumped animation delays. Co-authored-by: Claude Opus 4.6 <[email protected]>
…aming (#236) * Add OEIAC (UdG) expert reference to sustainability detective Module 1 Mirrors the bias detective's OEIAC info box pattern for the sustainability app: accent-highlighted box introducing the Sustainability principle, plus a collapsible listing the other 6 AI ethics principles. Applied to all three language files (EN/ES/CA) with bumped animation delays. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Sync ES/CA fixer files to simplified EN 12yo version Rewrites both fairness_fixer_es and fairness_fixer_ca to match the EN "Green AI Advisor" narrative introduced in PR #234. Replaces the old CTO/corporate framing with a city advisor story, relatable units (swimming pools, families' energy, cars), staggered impact reveals, and simplified quiz language for a 12-year-old audience. Structural changes in both files: - Module 0: 4-stat grid (homes, pools, cars, green score) - Modules 1–5: relatable briefs and simplified choice descriptions - CLIENT_JS: 4-item stats with conversion factors, sequential impact card reveals, 2 progress rings, "Bigger Picture" climate card - Dashboard: phase labels, leaderboard column CTO → Asesor/a - Formula section: div → details click-to-reveal - Carbon offset explanation (<strong> tag) carried over from EN fix Co-Authored-By: Claude Opus 4.6 <[email protected]> * Switch fixer game numbers to annual framing with accurate conversion factors Raw values ×12 (monthly→annual), energy conv 1→3.5 (Spanish home avg), CO₂ conv 0.35→4.2 (annual car emissions). Title screen now shows 14,400 homes/year, 89 pools/year. Round briefs and feedback updated accordingly. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
Relocate the Moral Compass Formula box from between the dashboard and game modules to after the modules (before leaderboard), so dynamic game content sits directly below the dashboard. Restyle with subtle border (1px solid), reduced opacity, and smaller summary text. Also upgrade detective ES/CA from plain div to collapsible <details> for consistency. Co-Authored-By: Claude Opus 4.6 <[email protected]>
…S/CA Reorder Module 1 so the UdG expert box and OEIAC principles appear first, then the section heading types out character-by-character with accent color on the key phrase, followed by a fade-in of the research content, slider, and comparison button. Adds aceInitM1Typewriter JS and aceReinitAll support for back-navigation replay. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Introduce "model" as the primary term for AI model sizing, keeping "brain" only as a one-time analogy in the brief. Updates round choices, quiz success message, and game feedback across all three languages. Co-Authored-By: Claude Opus 4.6 <[email protected]>
…#237) * Redesign Moral Compass Challenge (Activity 5) as Gradio Blocks app EN Rebuild the sustainability challenge from a standalone HTML page into a 4-module Gradio Blocks app matching the detective/fixer pattern: - Module 0: Certification Day — typewriter heading, real accuracy/rank stat cards, animated checklist with staggered delays ending in FAILED - Module 1: The Hidden Bill — 3 tap-to-unlock audit cards (training cost bar chart, inference cost prompt slider, global picture stats) - Module 2: Score Reset — gauge drain animation, formula reveal, interactive what-if sustainability slider with color-coded results - Module 3: Mission Briefing — detective/advisor mission cards, leaderboard (team + individual tabs), transition overlay Architecture: session-based auth, MoralcompassApiClient sync, mcc-* CSS prefix, light/dark mode, nav_js loading overlay, demo mode fallback. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Add ES/CA translations for redesigned Moral Compass Challenge (Activity 5) Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
* Redesign Moral Compass Challenge (Activity 5) as Gradio Blocks app EN Rebuild the sustainability challenge from a standalone HTML page into a 4-module Gradio Blocks app matching the detective/fixer pattern: - Module 0: Certification Day — typewriter heading, real accuracy/rank stat cards, animated checklist with staggered delays ending in FAILED - Module 1: The Hidden Bill — 3 tap-to-unlock audit cards (training cost bar chart, inference cost prompt slider, global picture stats) - Module 2: Score Reset — gauge drain animation, formula reveal, interactive what-if sustainability slider with color-coded results - Module 3: Mission Briefing — detective/advisor mission cards, leaderboard (team + individual tabs), transition overlay Architecture: session-based auth, MoralcompassApiClient sync, mcc-* CSS prefix, light/dark mode, nav_js loading overlay, demo mode fallback. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Add ES/CA translations for redesigned Moral Compass Challenge (Activity 5) Co-Authored-By: Claude Opus 4.6 <[email protected]> * Update Activity 5 planning doc for redesigned Moral Compass Challenge Co-Authored-By: Claude Opus 4.6 <[email protected]> * Remove EdTech Congress Barcelona reference from Activity 9 ES/CA Replace event-specific registration line with a proper translation of the EN content describing the model's purpose (identifying energy-inefficient buildings for climate rehabilitation). Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
…y injection (#239) * Reframe Module 0–1 energy audit as awareness question in EN/ES/CA Replace the pass/fail "Environmental Impact Audit" framing with a curiosity-driven "Have you considered this?" approach. Module 0 warning switches from red error to amber awareness banner. Module 1 cards now show static industry-wide stats (energy, water, scale) instead of model-specific animated bars and sliders. Removes mccInitTrainingBars, mccInitInference, and mccUpdatePromptCalc JS functions. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Fix dynamic accuracy injection broken by Gradio 5.x sanitization in EN/ES/CA Replace <img onload> hack (stripped by DOMPurify) with data-attribute div + JS polling pattern. Adds mccApplyUserData() to CLIENT_JS that reads data-* attrs from a hidden #mcc-user-data div and updates all dynamic accuracy/rank/gauge elements. Also removes visible=False from inject_js_html so the content actually renders in the DOM. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
Covers all 38 services across both deploy workflows, with idle baseline estimates at min-instances=1 and burst traffic projections for 1K–10K simultaneous classroom users in Spain. Co-Authored-By: Claude Opus 4.6 <[email protected]>
…t button in EN/ES/CA Switch from data-* attributes (stripped by Gradio 5.x DOMPurify) to pipe-delimited textContent for injecting real accuracy into the gauge drain, formula slider, and summary displays. Also hide the Gradio "Next" button on Module 0 since the "Certify My Model" HTML button is the intended CTA — checklist animation now auto-advances to Module 1 after the warning banner appears. Co-Authored-By: Claude Opus 4.6 <[email protected]>
#240) * Add Cloud Run cost analysis for moral compass apps with burst scenarios Covers all 38 services across both deploy workflows, with idle baseline estimates at min-instances=1 and burst traffic projections for 1K–10K simultaneous classroom users in Spain. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Fix accuracy injection bypassed by DOMPurify and remove redundant Next button in EN/ES/CA Switch from data-* attributes (stripped by Gradio 5.x DOMPurify) to pipe-delimited textContent for injecting real accuracy into the gauge drain, formula slider, and summary displays. Also hide the Gradio "Next" button on Module 0 since the "Certify My Model" HTML button is the intended CTA — checklist animation now auto-advances to Module 1 after the warning banner appears. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
…ies 4-9) EN/ES/CA Each activity's final step now has a button that posts a message to the parent Vue page to scroll to the next activity section, matching the existing pattern used by Activities 1-3. Co-Authored-By: Claude Opus 4.6 <[email protected]>
) * Add Cloud Run cost analysis for moral compass apps with burst scenarios Covers all 38 services across both deploy workflows, with idle baseline estimates at min-instances=1 and burst traffic projections for 1K–10K simultaneous classroom users in Spain. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Fix accuracy injection bypassed by DOMPurify and remove redundant Next button in EN/ES/CA Switch from data-* attributes (stripped by Gradio 5.x DOMPurify) to pipe-delimited textContent for injecting real accuracy into the gauge drain, formula slider, and summary displays. Also hide the Gradio "Next" button on Module 0 since the "Certify My Model" HTML button is the intended CTA — checklist animation now auto-advances to Module 1 after the warning banner appears. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Add "Proceed to Next Activity" navigation to all Gradio apps (Activities 4-9) EN/ES/CA Each activity's final step now has a button that posts a message to the parent Vue page to scroll to the next activity section, matching the existing pattern used by Activities 1-3. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
Split the conditional gr.Button into an explicit if/else so modules 1-3 get a plain visible button with no extra parameters, avoiding potential Gradio 5 issues with visible=(i != 0) and elem_id=None. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Resolve conflicts in MCC EN/ES/CA — keep explicit if/else button creation fix over the inline visible=(i != 0) approach from master. Co-Authored-By: Claude Opus 4.6 <[email protected]>
* Add Cloud Run cost analysis for moral compass apps with burst scenarios Covers all 38 services across both deploy workflows, with idle baseline estimates at min-instances=1 and burst traffic projections for 1K–10K simultaneous classroom users in Spain. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Fix accuracy injection bypassed by DOMPurify and remove redundant Next button in EN/ES/CA Switch from data-* attributes (stripped by Gradio 5.x DOMPurify) to pipe-delimited textContent for injecting real accuracy into the gauge drain, formula slider, and summary displays. Also hide the Gradio "Next" button on Module 0 since the "Certify My Model" HTML button is the intended CTA — checklist animation now auto-advances to Module 1 after the warning banner appears. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Add "Proceed to Next Activity" navigation to all Gradio apps (Activities 4-9) EN/ES/CA Each activity's final step now has a button that posts a message to the parent Vue page to scroll to the next activity section, matching the existing pattern used by Activities 1-3. Co-Authored-By: Claude Opus 4.6 <[email protected]> * Fix MCC nav buttons not showing on modules 1-3 in EN/ES/CA Split the conditional gr.Button into an explicit if/else so modules 1-3 get a plain visible button with no extra parameters, avoiding potential Gradio 5 issues with visible=(i != 0) and elem_id=None. Co-Authored-By: Claude Opus 4.6 <[email protected]> --------- Co-authored-by: Claude Opus 4.6 <[email protected]>
Since Gradio 5.36, visible=False removes components from the DOM entirely. The auto-advance JS uses getElementById to find and click the hidden Module 0 next button, which fails when the element is not in the DOM. Switch to CSS-based hiding (elem_classes) so the button remains in the DOM for programmatic clicking. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Co-Authored-By: Claude Opus 4.6 <[email protected]>
…mpatibility Since Gradio 5.36, visible=False removes components from the DOM entirely. This broke module navigation — columns and their child buttons were never rendered, so gr.update(visible=True) and getElementById() calls failed silently. Changes: - main_app_col: visible=False → visible="hidden" - Module columns: visible=(i==0) → visible="hidden" for inactive - Nav handlers: gr.update(visible=False) → gr.update(visible="hidden") - Typewriter IIFE: added offsetParent check to wait for visibility This ensures all DOM elements exist from page load, Next/Previous buttons work on all modules, and back navigation preserves JS state (flip cards, gauge animation, certification checklist). Co-Authored-By: Claude Opus 4.6 <[email protected]>
Navigation: - Fix all-pages-visible bug: visible="hidden" is truthy in Python, replaced with CSS class mcc-module-hidden for hiding modules - Module columns stay visible=True (in DOM) with CSS-based hiding, avoiding Gradio 5.36+ DOM removal issues with visible=False - Replace auto-advance from Module 0 with manual Next button reveal - main_app_col reverts to visible=False (one-time toggle on load) Content (EN/ES/CA): - Replace raw units (TWh, MWh, MW) with human comparisons - Remove LLM model names (GPT-4/GPT-3) in favor of "newest AI chatbots" - Replace "Nvidia H100 GPUs" with "specialized computer chips" - Spell out abbreviated numbers (5M → 5 million, 540B → comparison) - Lead stats with relatable comparisons for 12-year-old audience Co-Authored-By: Claude Opus 4.6 <[email protected]>
The last module's CTA button now sends navigate-to-activity-6 postMessage directly to the parent Vue page, skipping the intermediate overlay. Button label updated to "Proceed to Next Activity" in EN/ES/CA. Co-Authored-By: Claude Opus 4.6 <[email protected]>
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
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.
No description provided.