For all the polish found in the Adapt Authoring interface, there are a few spots that expose the underlying HTML, CSS and JavaScript. None of these is quite so obvious as the pins in the Hot Graphic component. This article will give you a handy technique for quickly positioning the pins.
Keep in mind that nothing in this technique is required to build a Hot Graphic. It is purely intended to speed positioning of pins. This article outlines the technique in Google Chrome using Chrome DevTools. Using this technique in other browser is possible, but beyond the scope of this article.
Warning: Advanced Topics Ahead
The following techniques require some knowledge of CSS and HTML. While expert knowledge is not requred, you must understand what HTML tags are and recognize HTML hiearchy and nesting.
1: Create Your Hot Graphic
To begin, create your Hot Graphic component in Adapt as you normally would. Remember, the values for left and top are the position of the top-left corner of the pin’s bounding box from the top-left corner of the image.
For now, don’t try to position the pins perfectly — just make a rough guess. You’ll be updating them in later steps.
Save the settings because the next step is…
2: Preview the Course
Most of the intersting work will be in the preview, where we’re going to play with the CSS to experiment with the position of the pin.
Click Preview and get ready to pretend you’re a developer.
3: Inspect the Pin in DevTools
Locate the pin you want to position, then right-click on the pin and select Inspect from the context menu so we can inspect the underlying HTML element for the pin.
Chrome DevTools will open as either a right or bottom panel or a new window depending on your settings. In our examples DevTools are in a panel on the right. The steps and behavior are the same regardless of the placement of DevTools.
As shown in the image below, DevTools should display a split-pane window with the page’s HTML file structure on the top and the CSS styles on the bottom. The HTML element you right-clicked will be highlighted in your computer’s default highlight color (it’s blue in the screen shot).
No Tag Highlited
If there is not an element highlighted in your HTML listing, right click the pin icon again and again select Inspect.
4: Ensure that the <button> is Seleted
Here’s where the knowledge of HTML will be important. You want to make sure you’ve selected the <button ...> element in the HTML list at the right. Depending on the point where you right-clicked, you may have selected the icon not the containing button.
If that’s the case you’ll see a <div ...> tag selected instead. If you look at the screen shot above, you can see the unselected <div ...> tag a few lines lower than the selected button.
If the <div ...> is selected, simply click the <button ...> that contains the selected <div ...> in the HTML listing and you’re ready to go.
5: Locate the CSS values for Left & Top
Now here’s where the CSS knowledge comes into play: If you look at the lower section of the DevTools panel, you’ll see a list of styles that have been applied to that button.
You’ll know you have the right element selected in DevTools if you see values for top and left as the first items in that section (circled in the screen shot).
Surprise! Those will be the Top and Left values you supplied in the Adapt interface.
6: Experiment with the Top & Left Values
The hard part of this is over, now you get to play with the underlying styles. You’ll notice that each of the numbers there are percentages, and if you click the number you can change the values. Now you can type in any value you want and the pin will move to that location.
Percents Only!
While you’re experimenting, remember the percent sign (%) is required and if you accidentially remove it you’ll have to add it back.
Do not attempt to use pixel values. Adapt will discard them or treat them as percent values and you’ll have to start all over.
There’s also a "cheat" you can try to make this easier: Rather than typing in a number, click the number for the top or left then press the up or down arrow key. That will change the number for you by either adding or subtracting one, respectively.
Also keep in mind that these numbers do not have to be whole numbers: You can use decimal places to get more precision in your placement.
7: Transfer the Values to Adapt
Once you have the pin where you want it, jot down the values and return to Adapt and input the new top and left values for your pin.
8: Profit!
Repeat this process with each of your pins. That should have your pins right where you want them.