Random JSON Tip Widget With Navigation

Random JSON Tip Widget with Navigation

I built a random tip widget for LMS platforms like D2L, displaying tips from a JSON array with navigation and auto-refresh. It shows a title, content, and link, with next/previous buttons and timed updates. Useful for engaging students with daily tips or reminders in educational environments.

Problem / Context

LMS dashboards need engaging, non-intrusive content to highlight tips or announcements. Static notices get ignored; dynamic, random tips with user control improve retention. Needed a lightweight widget to cycle through JSON-defined tips.

Constraints / Goals

  • Client-side: no server for JSON.
  • Navigable: next/previous buttons.
  • Auto-update: periodic refresh.
  • Embeddable: simple HTML/JS.
  • LMS-friendly: styled for integration.

Core Approach

Load JSON array, pick random tip on load, update DOM. Buttons change tip, timer auto-refreshes. CSS styles for clean look.

HTML Structure

<div>
  <h1 id="tiptitle">Tip of the Day! - Title</h1>
  <p id="tipcontent">tip content</p>
  <a href="#" id="url">See More</a>
  <a onclick="nextTip()">Next</a>
  <a onclick="previousTip()">Previous</a>
</div>

JSON Data

Assumes jsonarray with objects: {tipTitle, tipContent, url}.

Random Tip Function

function getRandomTip(){
  var xRandom = Math.floor(Math.random() * jsonarray.length);
  currentTip = xRandom;
  updateView(currentTip);
}

function nextTip(){
  clearInterval(updateTimer);
  currentTip = (currentTip == jsonarray.length - 1) ? 0 : currentTip + 1;
  updateView(currentTip);
}
function previousTip(){
  clearInterval(updateTimer);
  currentTip = (currentTip == 0) ? jsonarray.length - 1 : currentTip - 1;
  updateView(currentTip);
}

Update View

function updateView(tipnumber){
  document.getElementById("tiptitle").innerHTML = jsonarray[tipnumber].tipTitle;
  document.getElementById("tipcontent").innerHTML = (tipnumber+1) + ". " + jsonarray[tipnumber].tipContent;
  document.getElementById('url').href = jsonarray[tipnumber].url;
}

Auto-Update

getRandomTip();
updateTimer = setInterval(getRandomTip, updateInterval);

CSS Styling

Centered text, positioned nav buttons, clean fonts.

Results / Impact

  • Engages users with varied tips.
  • Reduces LMS monotony.
  • Easy to customize JSON.

Trade-offs / Limitations

  • JSON must be loaded separately.
  • No persistence.
  • Timer may interrupt users.

Next Steps

  • Add localStorage for seen tips.
  • Load JSON via fetch.
  • Pause on hover.

Tech Summary

JavaScript DOM updates, JSON data, setInterval.

Summary Pattern Example

Problem: Static LMS content lacks engagement.
Approach: Random JSON tip display with nav and auto-cycle.
Result: Dynamic widget for educational tips.

Portfolio javascriptjsonlmswidgetd2l