--- title: How to Create a 5-Star Rating System in Adobe Captivate description: Learn how to create an interactive 5-star ratings system in Adobe Captivate, using some custom JavaScript. image: https://blog.elblearning.com/hubfs/How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate_Blog%20Featured%20Image%20800x500.png --- [![ELB-Learning_Logo_ColorRGB-white-text-1](https://blog.elblearning.com/hubfs/ELB-Learning_Logo_ColorRGB-white-text-1.png) ](https://elblearning.com/) ![How to Create a 5-Star Rating System in Adobe Captivate_Blog Featured Image 800x500](https://blog.elblearning.com/hubfs/How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate_Blog%20Featured%20Image%20800x500.png) # How to Create a 5-Star Rating System in Adobe Captivate by [James Kingsley](https://blog.elblearning.com/author/james-kingsley) | Aug 22, 2019 SVGs are fun. Scalable Vector Graphics are really just fancy XML files. And this means we can use JavaScript to manipulate them. Which opens up a lot of possibilities. ### Before we get too far into this, take a moment to play with the demo: [![Demo](https://no-cache.hubspot.com/cta/default/5108583/bf2eae56-9622-4f20-84c6-3b0952142682.png)](https://cta-redirect.hubspot.com/cta/redirect/5108583/bf2eae56-9622-4f20-84c6-3b0952142682) I was looking for a way to create a rating system that allowed learners to rate slides on a scale of 1-5. I am sure there are ways to build this within Captivate but I have this weird problem that makes me seek out alternative methods. And these usually involve JavaScript. What I wanted was a solution that would allow learners to click on a set of stars to indicate their opinion. That would then be aggregated with all the other learners’ selections. But I also wanted a smooth animation during the selection and when the average was updated. ### My solution ended up using an SVG file (with a mask), Captivate variables, and some JavaScript. To begin, I created an SVG file that contains two boxes, black and gold. It also has a ‘mask’ that consists of five star shaped paths. Then I dropped my SVG into Captivate and created a couple of variables to track and display the learner’s rating and the average rating. Now it’s time for some JavaScript! I tend to solve these types of puzzles in stages. First I wanted to make sure that I could find the SVG within Captivate and resize the black box (under the mask).   var obj = $("#stars_democ_object")[0]; var svgdoc = obj.getSVGDocument(); var box = svgdoc.getElementById("box"); var rating = window.cpAPIInterface.getVariableValue("Text_Entry_Box_1"); $(box).animate({ width: rating * 20 + "%" });   ### Let’s break that down: 1. Find the HTML element that holds our SVG. 2. Get the SVG document. 3. Get the black box inside our SVG. 4. Get the rating the learner entered. 5. Animate the width of the black box to the percentage indicated by the learner. That works pretty well! Now let’s add some mouse over animations. var user_stars_obj = $("#stars_user_ratingc_object")[0]; var user_stars_svgdoc = user_stars_obj.getSVGDocument(); var user_stars_box = user_stars_svgdoc.getElementById("box"); var ratio = 0;   $("#stars_user_rating").mousemove(function(event) { ratio = Math.round((event.offsetX / $("#stars_user_rating").width()) * 100); window.cpAPIInterface.setVariableValue("var_user_rating", ratio); user_stars_box.setAttribute("width", ratio + "%"); });   $("#stars_user_rating").mousedown(function() { $("#stars_user_rating").off("mousemove"); $("#stars_user_rating").off("mousedown"); });   This starts the same as the previous code. We get all our data and elements. Then we add two listeners to the DIV element (that contains the SVG). One to listen for the mouse moving over it. The other listens for mouse clicks on it. When the mouse moves over the SVG we get its position and set our black box’s width to match it. Note I did not bother to animate this since it follows the mouse movement. We also push the value back into our Captivate variable so we can display it. I will spare you the finished code. But you can grab it [here](https://gist.github.com/KingsleyWitt/7b9a1c290b17f914bb9784a835b40cab). ### Watch the video to learn more about the final solution.     Visit the [eLearning Brothers Captivate Template Library](https://library.elearningbrothers.com/captivate-library-home-page) and check out our latest Course Starters. You'll be building interactive, engaging courses in no time! Not a member yet? Sign up for a free 7-day trial now. [![Free Trial](https://no-cache.hubspot.com/cta/default/5108583/36ed8265-8eeb-417a-8fb2-13849046607c.png)](https://cta-redirect.hubspot.com/cta/redirect/5108583/36ed8265-8eeb-417a-8fb2-13849046607c)   **About the Author** ![kingsley](https://blog.elblearning.com/hs-fs/hubfs/kingsley.png?width=200&name=kingsley.png)James Kingsley has worked in the eLearning Industry for over 16 years. He has won several awards for combining technologies to produce better eLearning. James is a Solver of Complex eLearning Puzzles, Founder of [CoursePortfolios.com](https://courseportfolios.com/), and the Co-Founder of [ReviewMyElearning.com](https://www.reviewmyelearning.com/). You can follow him on [Twitter](https://twitter.com/onEnterFrame) or connect with him on [LinkedIn](https://www.linkedin.com/in/jameskingsley) for additional tips and examples.         [eLearning-](https://blog.elblearning.com/tag/elearning), [instructional design-](https://blog.elblearning.com/tag/instructional-design), [asset library-](https://blog.elblearning.com/tag/asset-library), [interactivity-](https://blog.elblearning.com/tag/interactivity), [custom eLearning development-](https://blog.elblearning.com/tag/custom-elearning-development), [Adobe Captivate Resources-](https://blog.elblearning.com/tag/captivate-tips), [how to-](https://blog.elblearning.com/tag/how-to), [eLearning Development Tips-](https://blog.elblearning.com/tag/elearning-development-tips) ### Related Posts [![From Insight to Impact: Making Employee Engagement Surveys Work for L&D](https://blog.elblearning.com/hs-fs/hubfs/From%20Insight%20to%20Impact_Blog%20Featured%20Image%20800x500.png?width=388&name=From%20Insight%20to%20Impact_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/from-insight-to-impact-making-employee-engagement-surveys-work-for-ld) [From Insight to Impact: Making Employee Engagement Surveys Work for L&D](https://blog.elblearning.com/from-insight-to-impact-making-employee-engagement-surveys-work-for-ld) [![The Secret to Humanized Instructional Story Design (with No Fluff)](https://blog.elblearning.com/hs-fs/hubfs/Recap%207-31-2025_Blog%20Featured%20Image%20800x500.png?width=388&name=Recap%207-31-2025_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/how-story-based-learning-transforms-training-insights-from-instructional-story-design) [The Secret to Humanized Instructional Story Design (with No Fluff)](https://blog.elblearning.com/how-story-based-learning-transforms-training-insights-from-instructional-story-design) [![Why Great Learning Is Like Hearing Your Favorite Song for the First Time](https://blog.elblearning.com/hs-fs/hubfs/WhyGreatLearningIsLikeHearingYourFavoriteSongfortheFirstTime_Blog%20Featured%20Image%20800x500.png?width=388&name=WhyGreatLearningIsLikeHearingYourFavoriteSongfortheFirstTime_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/why-great-learning-is-like-hearing-your-favorite-song-for-the-first-time) [Why Great Learning Is Like Hearing Your Favorite Song for the First Time](https://blog.elblearning.com/why-great-learning-is-like-hearing-your-favorite-song-for-the-first-time) [![One Size Fits None: Why Scalable Personalization Is the Future of Learning](https://blog.elblearning.com/hs-fs/hubfs/One%20Size%20Fits%20None_Blog%20Featured%20Image%20800x500-1.png?width=388&name=One%20Size%20Fits%20None_Blog%20Featured%20Image%20800x500-1.png) ](https://blog.elblearning.com/one-size-fits-none-why-scalable-personalization-is-the-future-of-learning) [One Size Fits None: Why Scalable Personalization Is the Future of Learning](https://blog.elblearning.com/one-size-fits-none-why-scalable-personalization-is-the-future-of-learning) [![L&D Professionals: The Unsung Heroes of Risk Management](https://blog.elblearning.com/hs-fs/hubfs/L%26DProfessionalsTheUnsungHeroesofRiskManagement_Blog%20Featured%20Image%20800x500.png?width=388&name=L&DProfessionalsTheUnsungHeroesofRiskManagement_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/ld-professionals-the-unsung-heroes-of-risk-management) [L&D Professionals: The Unsung Heroes of Risk Management](https://blog.elblearning.com/ld-professionals-the-unsung-heroes-of-risk-management) [![Shaping the Future of L&D: Insights from Women Leaders](https://blog.elblearning.com/hs-fs/hubfs/Shaping%20the%20Future%20of%20L%26D-Insights%20from%20Women%20Leaders_Blog%20Featured%20Image%20800x500.png?width=388&name=Shaping%20the%20Future%20of%20L&D-Insights%20from%20Women%20Leaders_Blog%20Featured%20Image%20800x500.png) ](https://blog.elblearning.com/shaping-the-future-of-ld-insights-from-women-leaders) [Shaping the Future of L&D: Insights from Women Leaders](https://blog.elblearning.com/shaping-the-future-of-ld-insights-from-women-leaders) - [** Facebook ](http://www.facebook.com/sharer.php?u=https://blog.elblearning.com/how-to-create-a-5-star-rating-system-in-adobe-captivate%2F&t=How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate) - [** Twitter ](http://twitter.com/share?text=How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate&url=https://blog.elblearning.com/how-to-create-a-5-star-rating-system-in-adobe-captivate) - [** Pinterest ](http://pinterest.com/pin/create/button/?url=https://blog.elblearning.com/how-to-create-a-5-star-rating-system-in-adobe-captivate&media=https://cdn2.hubspot.net/hubfs/5108583/How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate_Blog%20Featured%20Image%20800x500.png&description=How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate) - [** LinkedIn ](http://www.linkedin.com/shareArticle?mini=true&url=https://blog.elblearning.com/how-to-create-a-5-star-rating-system-in-adobe-captivate%2F&title=How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate) - [** Gmail ](https://mail.google.com/mail/u/0/?view=cm&fs=1&su=How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate&body=https://blog.elblearning.com/how-to-create-a-5-star-rating-system-in-adobe-captivate%2F&ui=2&tf=1) - [** reddit ](http://www.reddit.com/submit?url=https://blog.elblearning.com/how-to-create-a-5-star-rating-system-in-adobe-captivate%2F&title=How%20to%20Create%20a%205-Star%20Rating%20System%20in%20Adobe%20Captivate) © 2025 ELB Learning. All rights reserved.  | [ Terms of Use](https://www.elblearning.com/legal/terms-of-use)  |  [Privacy Policy ](https://www.elblearning.com/legal/privacy-policy)|  [Legal Notices](https://www.elblearning.com/legal/legal-notices)