Javascript - Free text box with answer
AI helped me write code to create a quiz question using a free text box answer with suggested answer and requirement to complete before continuing. Screenshots are attached to show what it looks like if the learner doesn't enter text and when they do. Code is: <div class="custom-container"> <h1 class="custom-header">ENTER QUESTION HERE</h1> <div class="input-container"> <textarea id="myTextArea" class="custom-textbox" placeholder="Type your answer here..." rows="5"></textarea> <button id="submitBtn" class="custom-submit-button">Submit</button> <p id="submissionMessage" class="message"></p> </div> <!-- New element to display the suggested answer, hidden by default --> <div id="suggestedAnswer" class="suggested-answer" style="display: none;"> <p><b>Answer:</b></p> <p>ENTER ANSWER HERE</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const submitBtn = document.getElementById('submitBtn'); const textArea = document.getElementById('myTextArea'); const submissionMessage = document.getElementById('submissionMessage'); const suggestedAnswer = document.getElementById('suggestedAnswer'); submitBtn.addEventListener('click', function() { // Check if the text box has content if (textArea.value.trim() !== '') { // Sends the completion message to the parent Rise window window.parent.postMessage({ type: 'complete' }, '*'); // Update UI to show completion submissionMessage.innerText = 'Submission successful!'; submissionMessage.style.color = '#001655'; submitBtn.disabled = true; textArea.disabled = true; // Show the suggested answer suggestedAnswer.style.display = 'block'; } else { // Provide feedback to the learner if they didn't enter text submissionMessage.innerText = 'Please enter your response before submitting.'; submissionMessage.style.color = '#d32f2f'; // A red color for errors } }); }); </script> <style> .custom-container { background-color: white; font-family: Arial, sans-serif; text-align: center; padding: 0px; border-radius: 8px; margin: 0 auto; /* Center the container */ max-width: 850px; } .custom-header { color: #001655; /* Use the hex code for the header color */ font-size: 20px; /* Updated header font size */ margin-bottom: 20px; } .input-container { display: flex; flex-direction: column; align-items: center; } .custom-textbox { width: 100%; max-width: 850px; background-color: #e2f0fa; color: #001965; border: 1px solid #c8dbe6; padding: 15px; font-size: 17px; /* Updated text box font size */ line-height: 1.5; border-radius: 5px; box-sizing: border-box; /* Ensures padding is included in width */ } .custom-submit-button { background-color: #001965; /* Dark blue for the button */ color: white; border: none; padding: 12px 24px; font-size: 18px; cursor: pointer; margin-top: 10px; border-radius: 5px; transition: background-color 0.3s ease; } .custom-submit-button:hover { background-color: #003366; /* A slightly lighter blue on hover */ } .message { margin-top: 15px; font-weight: bold; min-height: 20px; /* Prevents layout shift */ } .suggested-answer { text-align: left; margin-top: 30px; padding: 10px; background-color: #f0f8ff; border: 1px solid #c8dbe6; border-radius: 5px; } .suggested-answer p { margin: 0 0 10px 0; color: #001965; } .suggested-answer p:last-child { margin-bottom: 0; } </style>Halloween Inspired Code Block: Haunted Emoji Hunt
Overview I recently experimented with the Rise Code Block for the first time and wanted to share a fun idea I developed. It started as a simple โCrack the Codeโ game for a project, and I later gave it a Halloween twist ๐ป! The project includes two interactive code blocks: ๐ Emoji Guessing Game: Players must complete a section to unlock the continue button. ๐ Badge Generator: Creates a badge with name, date, and timestamp. What I learned: Code 1 (emoji game) was straightforward to build and modify. Block 1 displays correctly on both PC and iPhone, but the tick โ and cross โ icons donโt appear when the link is accessed on a Samsung mobile device. Code 2 (badge generator) was more complex due to embedding an image using a Base64 string. Iโm not a coder, so I learned everything through Copilot while experimenting and this was a great learning experience! Things I would improve or reconsider next time: I didnโt test how the timestamp behaves across different time zones or include any prompt instructions for that. I tried adding a โDownload Badgeโ button. This worked in HTML but not within Rise. Project link: https://bit.ly/HauntedEmojiHunt Project Code: See attachments Please share your feedback, thoughts and ideas to make this better or on where it could be used.Capturing & Consolidating Learner Notes
I created an example of adding a learner notes functionality using the new Rise Code Block. This let's learners capture notes at various places in a course and then consolidates them all into a printable format or an email. The demo also includes a complete code design walk-through and has all of the code at the end for easy copy/paste into your own projects. Enjoy! https://360.articulate.com/review/content/4c2a7e7f-09ca-4d4f-890d-86cec26bf48b/reviewNew Code Block Examples
I've been playing with the new code block and I am loving it. You can see a couple examples at the links below. The first one is a new twist on an old file. Using Code blocks to share data across blocks using local storage. The second is more whimsical and features: 1) a date drive message from me about me in a screen dimension responsive video player. 2) a simple one player pong game (just to practice my coding) and 3) a simple math game based on the Pong game mechanics from above. I share the code for all three blocks within the course. Enjoy Passing Data Project Update Code Block PlaygroundRise360 : Customised assessment - experiment in Rise360
๐๐ ๐ฝ๐ฒ๐ฟ๐ถ๐บ๐ฒ๐ป๐๐ถ๐ป๐ด ๐๐ถ๐๐ต ๐๐๐๐๐ผ๐บ ๐๐๐๐ฒ๐๐๐บ๐ฒ๐ป๐๐ ๐ถ๐ป ๐ฅ๐ถ๐๐ฒ ๐ฏ๐ฒ๐ฌ ๐ฅ๐ถ๐๐ฒ ๐ฏ๐ฒ๐ฌ ๐ฑ๐ผ๐ฒ๐๐ปโ๐ ๐๐๐ฝ๐ฝ๐ผ๐ฟ๐ ๐ฐ๐ผ๐บ๐ฝ๐น๐ฒ๐ ๐พ๐๐ถ๐ ๐น๐ผ๐ด๐ถ๐ฐ ๐ป๐ฎ๐๐ถ๐๐ฒ๐น๐ ๐๐ถ๐๐ต๐ถ๐ป ๐ฎ๐ป โ๐๐บ๐ฏ๐ฒ๐ฑ ๐ฏ๐น๐ผ๐ฐ๐ธ,โ ๐ฏ๐๐ ๐๐๐ถ๐ป๐ด ๐ฐ๐๐๐๐ผ๐บ ๐๐ง๐ ๐ + ๐๐ฎ๐๐ฎ๐ฆ๐ฐ๐ฟ๐ถ๐ฝ๐ ๐๐ผ๐ ๐ฐ๐ฎ๐ป ๐๐ถ๐บ๐๐น๐ฎ๐๐ฒ ๐ถ๐. ๐ง๐ต๐ถ๐ ๐ถ๐ ๐บ๐ ๐ฒ๐ ๐ฝ๐ฒ๐ฟ๐ถ๐บ๐ฒ๐ป๐ ๐๐ถ๐๐ต ๐ฆ๐๐ผ๐ฟ๐๐น๐ถ๐ป๐ฒ-๐๐๐๐น๐ฒ ๐น๐ผ๐ด๐ถ๐ฐ ๐๐๐๐๐ผ๐บ๐ถ๐๐ฒ๐ฑ ๐๐๐๐ฒ๐๐๐บ๐ฒ๐ป๐ ๐ฏ๐น๐ผ๐ฐ๐ธ ๐ถ๐ป ๐ฅ๐ถ๐๐ฒ ๐ฏ๐ฒ๐ฌ. I recently tried something new in Rise 360 creating a small custom assessment block using HTML and JavaScript. The goal was to explore how a quiz could include a minimum passing score and only allow learners to continue to the next lesson even after achieving it. It was a good learning experiment to understand how customised logic and Rise blocks can work together to make learning more interactive and meaningful. Through this experiment, I realized we can blend Storyline-style logic with Riseโs responsive learning environment, creating richer and more flexible learner experiences. ๐น๐๐๐๐๐ ๐๐๐๐: https://shorturl.at/ipJ3nNew Code Block Game
It's been a long time since I shared my work, but I'm really pumped up about the potential of the new Code Block in Rise. I started with a basic idea and then started vibe coding. It's amazing what can be achieved in a short space of time, and have been resisting the temptation to just have fun, and instead focussed on keeping my work learning focussed. A couple of learnings: The power of the code block will be really unlocked if Articulate can... Allow us to upload zip folders with images in them. Everything says you can, but I have yet to have a single successful upload. Provide code/facility to allow a code that can report course completion based on the code i.e. when a game is completed completion can be sent - even better if scores can be included. When course continuation can be linked to code block completion it enables true gamification. Not being able to include images is a limitation, but not a blocker - you will notice I have included some very rudimentary graphics by encoding the images as base64, however it seems Rise has a limitation of not being able to read base64 strings longer than 500 characters at present. As I suspect will be the case for many others, I, work for a company with very stringent security policies, so we aren't allowed file storage solutions. If there can be a basic image storage allowance for zip code blocks, that changes the game! Would love your feedback you wonderful humans. Review LinkPeople Manager Simulation
This is a vibe-coded people manager simulation game. The learner steps into the role of a new call centre manager, taking over a struggling team. Each decision impacts key measures such as performance, morale, complaints, retention, and stress, and if the wrong calls stack up, you risk being โfiredโ. The full game runs inside Rise, with avatars, tooltips, game-over conditions, and a narrative end-summary. To keep it simple, I hosted the images directly in Rise (using a hidden lesson to grab the image URLs). Iโve also written a short how-to guide just below the game, so anyone who wants to repurpose the code and build their own simulation can follow along. ๐ Play the demo here This was a great way to test the Code Block for more advanced interactions, and to explore how lightweight simulations can boost engagement in corporate learning.HTML Notepad for Rise
Hi, hereโs a single-file HTML note editor for โRiseโ that: Is transparent (Rise controls the block background), Persists one โmainโ note across all lessons by default (same file/origin), Letโs the learner manually start a brand-new unique note with a button, And lets them switch between notes later (so they donโt lose the previous one). How it behaves Global by default: Everyone starts on a single โMain noteโ (main) that persists across all lessons (since itโs the same file/origin). Start New Note: Clicking the button creates a brand-new unique note (timestamp+random ID), switches to it, and saves independently. Switch back anytime: Use the dropdown to switch between notes youโve created. Each version is stored separately in localStorage. Safety: Nothing is deleted; each note keeps its own content. This keeps a default โone perpetual note across lessonsโ behaviour, while giving learners (or you) a simple manual way to branch to a fresh, unique note whenever needed. Instructions: just copy the code in the Word file below and paste into a Rise โCode Blockโ. If you find it useful, let me know.Crossword in Rise
I vibe coded a crossword puzzle interaction in the new Articulate Rise custom html block to support our Accounts Review training. It took about an hour of back-and-forth with Copilot to get this working. Check it out here https://rise.articulate.com/share/OHzJApuSIhFcNe4GLwmto58-5dg_-j-C#/lessons/3cT6ydJmoggnBlDSVsXmKaxp11ASrlKp Full HTML code is below the preview, feel free to adapt it and repurpose for own projects.Rise Custom HTML blocks as a completion trigger.
How to use the new Rise Custom HTML blocks as a completion trigger. This new Rise feature is awesome, but by default, any custom blocks you code mark as complete the moment theyโre viewed. Not great if youโve built a custom interaction or assessment which you want to ensure is completed as part of the learning experience. A workaround: add a SCORM call inside the block so the course only completes once the learner finishes your custom interaction. https://rise.articulate.com/share/XAi7AbMB5pkMWJLx-9QV3jRXhutox1ZK#/lessons/RNTzkftIhxH9pcezL0NtonVnN-a9Ee91 here is one I made earlier, Iโve tested it and this overrides any native completion trigger set on your rise course export. The full HTML code is beneath for you to repurpose as needed. This approach should work for Scorm 1.2 and 2004. To ensure the native rise triggers donโt conflict with our custom one eitherโฆ In cases where you can turn off navigation and buttons, add a hidden inaccessible final lesson and set the rise course completion trigger to 100%. If navigation needs to be active, drop in a storyline block with no completion trigger and set that as the native completion marker on export.
