Skip to content
CodeLifter

Random quote generator

A prompt for a credited, accessible quote generator, and the editor-tested code it asks for.

CL-0025 fixesVerified

1. The prompt

Not yet run against a named assistant · 109 words · CC-BY-4.0

Write a random quote generator in plain JavaScript with no dependencies. Store each quote as an object with text, speaker, source title and source URL. Show the quote in a blockquote inside a figure, set the blockquote's cite attribute to the source URL, and put the credit in a figcaption: the speaker's name, then a link to the source. Never show the same quote twice in a row. Write text with textContent and build the link with createElement, never innerHTML. Give the figure aria-live="polite" and aria-atomic="true" so screen readers announce each quote with its credit. Use a real button element, and start the script with an SPDX-License-Identifier: MIT comment.

2. What it should produce

random-quote.js JavaScript · 30 lines Reviewed
// Random quote generator that credits every quote it shows.
// SPDX-License-Identifier: MIT
// Source: https://codelifter.com/prompts/random-quote-generator/
const quotes = [
{ text: "Provenance is information about entities, activities, and people involved in producing a piece of data or thing, which can be used to form assessments about its quality, reliability or trustworthiness.",
who: "Paul Groth and Luc Moreau (eds.), W3C", source: "PROV-Overview", url: "https://www.w3.org/TR/prov-overview/" },
{ text: "Math.random() does not provide cryptographically secure random numbers.",
who: "MDN contributors", source: "Math.random()", url: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random" },
{ text: "The license information travels with the file (as sometimes not entire projects are used or license files are removed).",
who: "SPDX Specification v2.3.1", source: "Annex E", url: "https://spdx.github.io/spdx-spec/v2.3.1/using-SPDX-short-identifiers-in-source-files/" },
];
const textEl = document.getElementById("quote-text");
const creditEl = document.getElementById("quote-credit");
let last = -1;
function showQuote() {
let i = Math.floor(Math.random() * quotes.length);
if (quotes.length > 1 && i === last) i = (i + 1) % quotes.length; // never twice in a row
last = i;
const q = quotes[i];
textEl.textContent = q.text;
textEl.setAttribute("cite", q.url);
const link = document.createElement("a");
link.href = q.url;
link.textContent = q.source;
creditEl.replaceChildren(q.who + ", ", link);
}
document.getElementById("quote-next").addEventListener("click", showQuote);
showQuote();
2. What the prompt should produce. Place before the closing body tag, after the markup below.

What a one-line prompt gets you

Representative output for “a random quote generator in JavaScript” and nothing else, written by the editors to show the pattern. It runs. It also has five gaps you would not see in a quick test.

AI-generatedunreviewed
Shown for comparison. Do not ship.
const quotes = [
"A well-known line about success. - Famous Person",
"A well-known line about courage. - Another Famous Person",
"A well-known line about time. - Unknown"
];
function newQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
document.getElementById("quote").innerHTML = quotes[randomIndex];
}
newQuote();
Representative one-line-prompt output, written by the editors to show the pattern. Not a recorded generation.
  1. 1 Each quote is one string with the name pasted on the end.There is no source to check and no link a reader can follow. The reviewed code stores text, speaker, source title and URL separately and links the source in the credit.Prompt line: “Store each quote as an object with text, speaker, source title and source URL.”
  2. 2 It writes with innerHTML.A quote that contains angle brackets is parsed as markup. The reviewed code uses textContent for the quote and builds the credit link with createElement.Prompt line: “Write text with textContent and build the link with createElement, never innerHTML.”
  3. 3 The same quote can appear twice in a row.Each pick is independent, so with three quotes about one click in three shows no change. The reviewed code steps to the next quote when the pick matches the last one.Prompt line: “Never show the same quote twice in a row.”
  4. 4 Screen readers hear nothing.The box is not a live region, so the change is silent. The reviewed figure has aria-live="polite" and aria-atomic="true", so the quote and its credit are read together.Prompt line: “Give the figure aria-live="polite" and aria-atomic="true".”
  5. 5 It carries no licence.Nothing records who wrote the code or on what terms it may be reused. The reviewed script starts with an SPDX MIT identifier and a source line.Prompt line: “Start the script with an SPDX-License-Identifier: MIT comment.”

Install it

  1. 1Paste the figure and the button where the quote should appear. The markup is below.
  2. 2Save the script as random-quote.js and load it just before the closing body tag, or with the defer attribute, so the elements exist when it runs.
  3. 3Replace the sample entries in the quotes array. Each needs text, who, source and url; keep the commas between entries.
  4. 4Style .quote-box, the blockquote and the button to match your site. The button is a real button, so it already works with the keyboard.
  5. 5If you can, test with a screen reader: press the button and listen for the new quote and its credit.
quote.html HTML · 6 lines Reviewed
<figure class="quote-box" aria-live="polite" aria-atomic="true">
<blockquote id="quote-text"></blockquote>
<figcaption id="quote-credit"></figcaption>
</figure>
<button type="button" id="quote-next">Show another quote</button>
<script src="random-quote.js"></script>

Browser notes

  • Current desktop browser Tested The editors tested the script in a current desktop browser before publishing, on 2026-10-14. We do not claim screen reader testing.
  • Browsers with Element.replaceChildren() Expected MDN lists replaceChildren() as Baseline widely available, across browsers since October 2020. The credit line depends on it.
  • Math.random() and blockquote Expected MDN lists both as Baseline widely available, across browsers since July 2015.
  • Browsers without replaceChildren() Not supported The credit line throws an error. Remove the old children and append the new ones instead if you must support such a browser.

Support data checked on MDN 2026-10-15.

Questions and answers

Has this prompt been tested with an assistant?

Not yet. The editors wrote the prompt to describe the reviewed code line by line. The code was tested by the editors in a current desktop browser on 2026-10-14 and re-run in a scripted DOM test on 2026-10-15, where 3,000 clicks never showed the same quote twice in a row. Nobody has run the prompt against a named assistant, so compare any answer with the code above.

How do I pick a random item from an array?

Use quotes[Math.floor(Math.random() * quotes.length)]. MDN documents Math.random() as returning a number from 0 up to but not including 1, so the index always falls inside the array. MDN also notes that Math.round() instead of Math.floor() would make the distribution non-uniform.

How does the script avoid showing the same quote twice?

It remembers the last index. If the new pick matches, it steps to the next quote instead. That slightly favours the quote after a repeat, which nobody will notice in a quote box. If every quote should appear once per round, shuffle the indexes into a bag and take one at a time.

Why textContent instead of innerHTML?

textContent treats the quote as plain text, so a quote containing angle brackets is shown rather than run as markup. The link in the credit is built with createElement for the same reason.

Why aria-live="polite" and aria-atomic="true"?

MDN explains that screen readers focus on one part of the page at a time, so a change elsewhere can go unnoticed. A polite region is announced at the next graceful opportunity without interrupting, and aria-atomic asks for the whole region, quote and credit together, to be read.

Why is the credit outside the blockquote?

MDN notes that, according to the HTML specification, attribution for a quotation must be placed outside the blockquote element, and that the cite attribute holds a URL for the source. The script puts the credit in the figcaption and sets cite on the blockquote.

Do I need permission to quote someone?

Credit and permission are separate questions. Credit the person and link the original source. Whether you also need permission depends on how much you quote and the law where you publish. For openly licensed material, follow its terms: the CC BY-SA 4.0 deed asks for the creator, a copyright notice, a licence notice, a disclaimer notice and a link, and a note if you changed it.

Does it work without JavaScript?

Not as shipped: the figure starts empty. If readers without scripts should see a quote, type one quote and its credit into the markup by hand. The script replaces both when it runs.

Is Math.random() random enough for a quote box?

Yes. MDN describes its output as approximately uniform, which is plenty here. MDN also states that it does not provide cryptographically secure random numbers, so never use it for passwords or tokens.

Can I use this script on a commercial site?

Yes. The code is MIT licensed, which allows commercial use as long as the licence line stays with it. The quotes you add carry their own terms.

Sources

  1. 1Math.random()MDN Web Docs · checked 2026-10-15
  2. 2ARIA: aria-live attributeMDN Web Docs · checked 2026-10-15
  3. 3<blockquote>: The Block Quotation elementMDN Web Docs · checked 2026-10-15
  4. 4Element: replaceChildren() methodMDN Web Docs · checked 2026-10-15
  5. 5Attribution-ShareAlike 4.0 International, deedCreative Commons · checked 2026-10-15
  6. 6PROV-Overview (sample quote source)W3C Working Group Note · 30 April 2013, checked 2026-10-15
  7. 7SPDX Specification v2.3.1, Annex E (sample quote source)SPDX, Linux Foundation · checked 2026-10-15