{"id":7901,"date":"2025-10-07T15:12:22","date_gmt":"2025-10-07T15:12:22","guid":{"rendered":"https:\/\/ioninteractive.com\/ionacademy\/?p=7901"},"modified":"2025-10-07T17:05:27","modified_gmt":"2025-10-07T17:05:27","slug":"wheel-of-fortune","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/wheel-of-fortune\/","title":{"rendered":"Wheel of Fortune Component"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"contents\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#contents\"><\/a>Contents<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#installation-workflow\">Installation Workflow<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#usage-configuration\">Usage Configuration<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#optional-workflow-winlose-lightboxes\">Optional Workflow: Win\/Lose Lightboxes<\/a><\/li>\n\n\n\n<li class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#testing-checklist\">Testing Checklist<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"installation-workflow\">Installation Workflow<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-prepare-the-minified-assets-locally\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#step-1-prepare-the-minified-assets-locally\"><\/a>Step 1: Prepare the minified assets locally<\/h3>\n\n\n\n<p class=\"\">Create the two asset files on your computer before uploading them to Ion.<\/p>\n\n\n\n<p class=\"\"><strong>Windows (Notepad):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Launch Notepad.<\/li>\n\n\n\n<li class=\"\">Paste the CSS snippet.<\/li>\n\n\n\n<li class=\"\">Choose <code>File &gt; Save As<\/code>, set \u201cSave as type\u201d to \u201cAll Files\u201d, pick UTF-8 encoding, and save as <code>ixp-ps-widget-wheel-of-fortune.min.css<\/code>.<\/li>\n\n\n\n<li class=\"\">Open a new Notepad window.<\/li>\n\n\n\n<li class=\"\">Paste the JavaScript snippet.<\/li>\n\n\n\n<li class=\"\">Save the file as <code>ixp-ps-widget-wheel-of-fortune.min.js<\/code>.<\/li>\n<\/ol>\n\n\n\n<p class=\"\"><strong>macOS (TextEdit):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Open TextEdit and select <code>Format &gt; Make Plain Text<\/code>.<\/li>\n\n\n\n<li class=\"\">Paste the CSS snippet.<\/li>\n\n\n\n<li class=\"\">Save the document as <code>ixp-ps-widget-wheel-of-fortune.min.css<\/code>.<\/li>\n\n\n\n<li class=\"\">Create a new plain-text document.<\/li>\n\n\n\n<li class=\"\">Paste the JavaScript snippet.<\/li>\n\n\n\n<li class=\"\">Save the document as <code>ixp-ps-widget-wheel-of-fortune.min.js<\/code>.<\/li>\n<\/ol>\n\n\n\n<p class=\"\"><strong>Linux (Gedit or another plain-text editor):<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Open your preferred plain-text editor (for example, Gedit).<\/li>\n\n\n\n<li class=\"\">Paste the CSS snippet.<\/li>\n\n\n\n<li class=\"\">Save the file as <code>ixp-ps-widget-wheel-of-fortune.min.css<\/code>.<\/li>\n\n\n\n<li class=\"\">Create a second document.<\/li>\n\n\n\n<li class=\"\">Paste the JavaScript snippet.<\/li>\n\n\n\n<li class=\"\">Save the file as <code>ixp-ps-widget-wheel-of-fortune.min.js<\/code>.<\/li>\n<\/ol>\n\n\n\n<p class=\"\"><strong>Alternative editors:<\/strong> Any plain-text editor that preserves UTF-8 encoding without hidden formatting\u2014such as Visual Studio Code, Sublime Text, or Atom\u2014works equally well. Create two new files, paste the respective snippets, and save them using the filenames above.<\/p>\n\n\n\n<p class=\"\"><strong>CSS content to copy:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div.ixp-ps-widget-wheel-of-fortune{user-select:none;-moz-user-select:none;position:relative;max-width:100%;height:0;padding-bottom:100%}div.ixp-ps-widget-wheel-of-fortune svg{--offset:0;position:absolute;overflow:visible;transition:.2s;transition-timing-function:ease-out;width:100%;height:100%;top:0;left:0}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.wheel{transform:rotate(var(--offset))}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.wheel.spin{animation-name:spin;animation-duration:6s;animation-fill-mode:forwards}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.wheel&gt;g.sector&gt;path{stroke:#fff}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.wheel&gt;g.sector&gt;path:not(&#91;fill]){fill:#0c2032}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.wheel&gt;g.sector&gt;text{fill:#000;writing-mode:tb;text-orientation:upright}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.wheel&gt;g.sector&gt;path:not(&#91;fill])+text{fill:#fff}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.center&gt;path{cursor:pointer;fill:#0c2032;stroke:#fff}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.center&gt;text{cursor:pointer;fill:#fff}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.center&gt;*{transition:.3s}div.ixp-ps-widget-wheel-of-fortune svg&gt;g.center:hover&gt;*{transform:scale(1.3)}@keyframes spin{from{transform:rotate(var(--offset))}to{transform:rotate(var(--target))}}\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>JavaScript content to copy:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>!function(){const t=function({onClick:t=(()=&gt;{}),items:e=&#91;],playOnce:n=!1,hasPlayed:r=!1,parent:a}){if(!a)throw new Error(\"No target node provided\");const o={onClick:t,items:e,playOnce:n,hasPlayed:r,parent:a,radius:200,sectorCount:Math.max(e.length,2)},s=(t=1,e=0)=&gt;Math.floor(Math.random()*t)+e,l=({radius:t,sectorCount:e,items:n})=&gt;{const r=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"svg\");r.setAttribute(\"viewBox\",`-${1.2*t} -${1.2*t} ${2.4*t} ${2.4*t}`);const a=360\/e,l=a\/2+180,p=i(n,e),u=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"g\");u.setAttribute(\"class\",\"wheel\"),r.appendChild(u);for(let r=0;r&lt;e;++r){const o=l+a*r,s=l+a*(r+1),c=f(e-r+p,e);d(o,s,u,n&#91;c],t)}return c(r,\"Spin\"),r.addEventListener(\"click\",function(t){switch(t.target.parentNode.getAttribute(\"class\").split(\" \")&#91;0]){case\"center\":((t,{sectorCount:e,playOnce:n,hasPlayed:r,items:a,onClick:l})=&gt;{if(1==n&amp;&amp;1==r)return;const c=360\/e,d=s(e),p=i(a,e),u=f(e-d+p,e),h=`${(e-u)*c+360*s(2,4)}`;t.style.setProperty(\"--target\",h+\"deg\"),y(t,\"spin\").then(e=&gt;{t.style.setProperty(\"--offset\",Math.floor(h%360)+\"deg\"),e.target.classList.remove(\"spin\"),l(a&#91;u]),o.hasPlayed=!0})})(r.querySelector(\"g.wheel\"),o)}}),r},c=(t,e)=&gt;{const n=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"g\");n.setAttribute(\"class\",\"center\");const r=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"path\");r.setAttribute(\"d\",\"m -9 -24 l 9 -16 l 9 16 a 25 25 0 1 1 -18 0 z\"),n.appendChild(r);const a=u(0,3,e);n.appendChild(a),t.appendChild(n)},i=(t,e)=&gt;t.length&lt;e&amp;&amp;length&lt;4?-2:-1,d=(t,e,n,r,a)=&gt;{const o=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"g\"),s=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"path\");if(s.setAttribute(\"class\",\"sector-path\"),r.backgroundColor&amp;&amp;s.setAttribute(\"fill\",r.backgroundColor),s.setAttribute(\"d\",p(t,e,a)),o.appendChild(s),o.setAttribute(\"class\",\"sector\"),o.setAttribute(\"data-id\",r.id),r.label){const n=h(t,e,1.9*a),s=-1*(t+(e-t)\/2-180),l=u(n.x,n.y,r.label,s,\"start\");o.appendChild(l)}n.appendChild(o)},p=(t,e,n)=&gt;{const r=w(t,n);let a=\"M\"+m(r);return a+=`A${n} ${n} 0 0 0 ${m(w(e,n))}`,a+=\"L 0 0\",a+=\"Z\"},u=(t,e,n,r,a)=&gt;{const o=document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"text\");return t=g(t),e=g(e),r=r||0,a=a||\"middle\",o.setAttribute(\"text-anchor\",a),o.setAttribute(\"transform\",`rotate(${r}, ${t}, ${e})`),o.setAttribute(\"x\",t),o.setAttribute(\"y\",e),o.innerHTML=n,o},h=(t,e,n)=&gt;w((t+e)\/2,n\/2),w=(t,e)=&gt;({x:Math.sin(b(t))*e,y:Math.cos(b(t))*e}),m=t=&gt;`${g(t.x)} ${g(t.y)}`,g=t=&gt;{if(Number.isInteger(t))return t.toString();if(t){let e=(+t).toFixed(5);return e.match(\/\\.\/)&amp;&amp;(e=e.replace(\/\\.?0+$\/,\"\")),e}},f=(t,e)=&gt;(t&lt;0&amp;&amp;(t=e+t),t&gt;=e&amp;&amp;(t-=e),t&lt;e?t:null),b=t=&gt;t*(Math.PI\/180),y=(t,e)=&gt;new Promise(function(n){t.addEventListener(\"animationend\",function e(r){t.removeEventListener(\"animationend\",e),n(r)}),t.classList.add(e)});return{create:()=&gt;{const t=l(o);o.parent.appendChild(t)}}};!function(e,n){const r=t=&gt;{const e=document.createElement(\"div\");e.innerHTML=t;return e.textContent.replace(\/\\s+(?=(&#91;^\"]*\"&#91;^\"]*\")*&#91;^\"]*$)\/g,\"\")},a=t=&gt;{try{return JSON.parse(t)}catch(t){return console.warn(t),null}},o=({scriptElement:n,data:o,dataField:s,sliceColors:l=\"\",hasPlayed:c=!1,playOnlyOnce:i=!1,action:d=\"\"})=&gt;{const p=n.closest(\"div\");p.classList.add(\"ixp-ps-widget-wheel-of-fortune\");const u=a(r(o)),h=r(l);let w=\"\"!=h?a(h):null;const m=u.map((t,e)=&gt;{const&#91;n,r]=Object.entries(t)&#91;0];let a={id:`${n}-${e}`,label:n,value:r};return null!=w&amp;&amp;null!=w&#91;e]&amp;&amp;(a.backgroundColor=w&#91;e]),a});t({id:p.id,parent:p,items:m,playOnce:!!i,hasPlayed:!!c,onClick:t=&gt;{((t,n=(()=&gt;{}))=&gt;{const r=&#91;];let a=0,o=Object.prototype.toString;if(\"object\"!=typeof t)return!1;if(\"&#91;object Object]\"===o.call(t))for(propName in t)t.hasOwnProperty(propName)&amp;&amp;r.push({dataField:'{ \"name\": \"'+propName+'\" }',value:t&#91;propName]});else if(\"&#91;object Array]\"===o.call(t))for(;a&lt;t.length;a++)r.push({dataField:'{ \"name\": \"'+t&#91;a].f+'\" }',value:t&#91;a].v});e.data.save({data:r,success:n})})({&#91;s]:t.value}),\"\"!=d&amp;&amp;(setTimeout(() =&gt; {location.href = d}, 750))}}).create()};n.forEach((&#91;t,e])=&gt;{switch(t){case\"init\":o(e)}})}(window.ixp.runtime,window.ixpPSWidgetDataLayer)}();\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-2-upload-the-framework-assets\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#step-2-upload-the-framework-assets\"><\/a>Step 2: Upload the framework assets<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">In Ion, navigate to <code>Libraries &gt; Frameworks &gt; Ion Framework<\/code>. <\/li>\n\n\n\n<li class=\"\">Upload the <code>ixp-ps-widget-wheel-of-fortune.min.css<\/code> and <code>ixp-ps-widget-wheel-of-fortune.min.js<\/code> files you created in Step 1.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"994\" height=\"525\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-files-1.png\" alt=\"\" class=\"wp-image-7906\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-files-1.png 994w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-files-1-300x158.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-files-1-768x406.png 768w\" sizes=\"auto, (max-width: 994px) 100vw, 994px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"641\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-confirm-1024x641.png\" alt=\"\" class=\"wp-image-7908\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-confirm-1024x641.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-confirm-300x188.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-confirm-768x481.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-1-upload-confirm.png 1034w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Confirm both files now appear in the framework list before leaving the screen.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"496\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-2-framework-list-1024x496.png\" alt=\"\" class=\"wp-image-7910\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-2-framework-list-1024x496.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-2-framework-list-300x145.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-2-framework-list-768x372.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/installation-step-2-framework-list.png 1030w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-register-the-widget-in-ion\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#step-3-register-the-widget-in-ion\"><\/a>Step 3: Register the widget in Ion<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Navigate to <code>Libraries &gt; Widgets<\/code>, click <strong>Create New Widget<\/strong>, and select an existing widget category (or add a new one for the wheel widget).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"99\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-1-create-widget-1024x99.png\" alt=\"\" class=\"wp-image-7912\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-1-create-widget-1024x99.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-1-create-widget-300x29.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-1-create-widget-768x74.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-1-create-widget.png 1258w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">In the widget editor, give the widget a descriptive name, confirm the category selection, and paste the embed snippet below into the code pane.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"556\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-1024x556.png\" alt=\"\" class=\"wp-image-7914\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-1024x556.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-300x163.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-768x417.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-940x510.png 940w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-345x187.png 345w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet-626x339.png 626w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-2-editor-snippet.png 1251w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\"><strong>Widget embed snippet (update placeholders before saving):<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script&gt;\n  (function (d, s, id, src, fjs) {\n    if (d.getElementById(id)) return;\n    fjs = d.getElementsByTagName(s)&#91;0];\n    s = d.createElement(s);\n    s.id = id;\n    s.rel = \"stylesheet\";\n    s.href = src;\n    fjs.parentNode.insertBefore(s, fjs);\n  })(\n    document,\n    \"link\",\n    \"ixp-ps-wof-css\",\n    \"\/Templates\/ion\/ion_Framework_v4.0\/ixp-ps-widget-wheel-of-fortune.min.css\"\n  );\n\n  (function (d, s, id, src, fjs) {\n    if (d.getElementById(id)) return;\n    fjs = d.getElementsByTagName(s)&#91;0];\n    s = d.createElement(s);\n    s.id = id;\n    s.src = src;\n    s.async = true;\n    fjs.parentNode.insertBefore(s, fjs);\n  })(\n    document,\n    \"script\",\n    \"ixp-ps-wof-js\",\n    \"\/Templates\/ion\/ion_Framework_v4.0\/ixp-ps-widget-wheel-of-fortune.min.js\"\n  );\n\n  window.ixpPSWidgetDataLayer = window.ixpPSWidgetDataLayer || &#91;];\n  function ixpPSWidget() {\n    ixpPSWidgetDataLayer.push(arguments);\n  }\n\n  ixpPSWidget(\"init\", {\n    data: ` ##dataJSON `,\n    sliceColors: ` ##colorJSON `,\n    dataField: \"##dataField\",\n    hasPlayed: `{{##dataField}}`,\n    scriptElement: document.currentScript,\n    playOnlyOnce: \"##playOnlyOnce\",\n    action: \"##action\",\n  });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Define the widget variables so editors can configure the experience when they drop the widget into a creative.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"501\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-dialog-1024x501.png\" alt=\"\" class=\"wp-image-7916\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-dialog-1024x501.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-dialog-300x147.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-dialog-768x376.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-dialog-1536x752.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-dialog.png 1827w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"887\" height=\"159\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-list.png\" alt=\"\" class=\"wp-image-7918\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-list.png 887w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-list-300x54.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-list-768x138.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/registration-step-3-variable-list-880x159.png 880w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Select <strong>Add Variable<\/strong>, enter the label, choose the field type, and toggle <strong>Required<\/strong> when the field must be supplied.<\/li>\n\n\n\n<li class=\"\">Click <strong>OK<\/strong> to add the variable and repeat until the list matches the recommended settings below.<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>Recommended settings for widget variables in Ion:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Variable<\/strong><\/td><td><strong>Label<\/strong><\/td><td><strong>Type<\/strong><\/td><td><strong>Required<\/strong><\/td><\/tr><tr><td>action<\/td><td>Action Trigger<\/td><td>Action<\/td><td>no<\/td><\/tr><tr><td>colorJSON<\/td><td>Background Colors<\/td><td>Text<\/td><td>no<\/td><\/tr><tr><td>dataField<\/td><td>DataField Name<\/td><td>Text<\/td><td>yes<\/td><\/tr><tr><td>dataJSON<\/td><td>Wheel Contents<\/td><td>Text<\/td><td>yes<\/td><\/tr><tr><td>playOnlyOnce<\/td><td>Can only play once<\/td><td>Text<\/td><td>no<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Save the widget so it becomes available in creatives.<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#contents\">Back to Contents<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"usage-configuration\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#usage-configuration\"><\/a>Usage Configuration<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Drag the widget into your creative (<code>Elements palette &gt; Basics &gt; Widget<\/code>), then select the widget name configured above.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"831\" height=\"983\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/usage-step-1-widget-config.png\" alt=\"\" class=\"wp-image-7920\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/usage-step-1-widget-config.png 831w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/usage-step-1-widget-config-254x300.png 254w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/usage-step-1-widget-config-768x908.png 768w\" sizes=\"auto, (max-width: 831px) 100vw, 831px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Populate the widget variables. Keep JSON values on a single line so the Ion editor does not add additional whitespace.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Wheel Contents<\/strong> must be a JSON array of one-key objects. The key becomes the label on the wheel and the value is saved to the respondent record.<\/li>\n\n\n\n<li class=\"\"><strong>Background Colors<\/strong> is an optional JSON array (<code>[\"#color1\", \"#color2\", ...]<\/code>) that overrides the default palette.<\/li>\n\n\n\n<li class=\"\"><strong>DataField Name<\/strong> must reference an Ion data field that already exists (for example, create a Text field in <code>Data Collection &gt; Data Fields<\/code> before wiring the widget).<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>Example payload for <code>Wheel Contents<\/code>:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  { \"Win\": true },\n  { \"Win\": true },\n  { \"Win\": true },\n  { \"Lose\": false },\n  { \"Lose\": false },\n  { \"Lose\": false },\n  { \"Win\": true },\n  { \"Win\": true },\n  { \"Win\": true },\n  { \"Lose\": false },\n  { \"Lose\": false },\n  { \"Lose\": false }\n]\n<\/code><\/pre>\n\n\n\n<p class=\"\"><strong>Tip:<\/strong> Paste JSON directly (without pretty formatting) into the Ion editor so the runtime parser can read it, and make any edits in a plain-text editor before replacing the in-place value.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#contents\">Back to Contents<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"optional-workflow-winlose-lightboxes\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#optional-workflow-winlose-lightboxes\"><\/a>Optional Workflow: Win\/Lose Lightboxes<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Configure the wheel as described above, then add an action trigger that redirects to the current page (use an anchor if you need to jump back to the wheel after reload).<\/li>\n\n\n\n<li class=\"\">Create page rules that evaluate the saved wheel result so the correct lightbox can respond on load.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"454\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-2-page-rules-1024x454.png\" alt=\"\" class=\"wp-image-7923\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-2-page-rules-1024x454.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-2-page-rules-300x133.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-2-page-rules-768x341.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-2-page-rules.png 1120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Place two lightboxes under the wheel\u2014one for the win state and one for the lose state\u2014set them to open on page load, hide their buttons, and apply conditional show\/hide rules that match the wheel response.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"444\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-win-settings-1024x444.png\" alt=\"\" class=\"wp-image-7925\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-win-settings-1024x444.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-win-settings-300x130.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-win-settings-768x333.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-win-settings.png 1468w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-3-show-hide-1024x529.png\" alt=\"\" class=\"wp-image-7927\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-3-show-hide-1024x529.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-3-show-hide-300x155.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-3-show-hide-768x397.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2025\/10\/optional-lightbox-step-3-show-hide.png 1468w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#contents\">Back to Contents<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"testing-checklist\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#testing-checklist\"><\/a>Testing Checklist<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Spin the wheel multiple times in preview mode to confirm the CSS and JS assets are loading from <code>\/Templates\/ion\/ion_Framework_v4.0\/<\/code>.<\/li>\n\n\n\n<li class=\"\">Confirm <code>playOnlyOnce<\/code> correctly prevents a second spin when the merge field value evaluates to true.<\/li>\n\n\n\n<li class=\"\">If <code>action<\/code> is provided, ensure the redirect fires after the spin completes and the data layer saves.<\/li>\n\n\n\n<li class=\"\">Validate any custom slice colors render as expected and contrast with the text labels.<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><a href=\"file:\/\/\/C:\/Users\/Marcus\/Downloads\/wheel%20of%20fortune%20doc\/Wheel_of_Fortune_Quickstart_enhanced.md#contents\">Back to Contents<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents Installation Workflow Step 1: Prepare the minified assets locally Create the two asset files on your computer before uploading them to Ion. Windows (Notepad): macOS (TextEdit): Linux (Gedit or another plain-text editor): Alternative [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1],"tags":[2173,2119],"class_list":["post-7901","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-advanced","tag-ion-templates"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=7901"}],"version-history":[{"count":4,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7901\/revisions"}],"predecessor-version":[{"id":7931,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7901\/revisions\/7931"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=7901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=7901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=7901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}