Determine the Flesch-Kincaid Grade Level of Content on Any Website

Background

The reading level of learning materials can impose unnecessary cognitive load and access barriers to learners. As a learning designer, you should ensure that any content you create or include in learning experiences is suitable for the reading level of your learners.

Task

Create an Inspector Snippet that you can run on any webpage to test the Flesch-Kincaid Grade Level of the webpage.

Solution

Here's an example of a prompt we could use:

using js in the inspector, calculate a web page's flesch-kincaid grade level score

In ChatGPT, this returned the following, which could be saved as a Snippet and run on any page:

// Function to calculate the Flesch-Kincaid Grade Level score
function calculateFleschKincaid(text) {
// Split the text into sentences
const sentences = text.match(/[^.!?]+[.!?]+/g) || [];

let totalWords = 0;
let totalSyllables = 0;

// Calculate the total number of words and syllables
sentences.forEach((sentence) => {
const words = sentence.split(/\s+/);
totalWords += words.length;

words.forEach((word) => {
totalSyllables += countSyllables(word);
});
});

// Calculate the Flesch-Kincaid Grade Level score
const averageWordsPerSentence = totalWords / sentences.length;
const averageSyllablesPerWord = totalSyllables / totalWords;

const score =
0.39 * averageWordsPerSentence +
11.8 * averageSyllablesPerWord -
15.59;

return score.toFixed(2);
}

// Function to count syllables in a word
function countSyllables(word) {
word = word.toLowerCase().replace(/[^a-z]/g, '');
if (word.length <= 3) return 1;
word = word.replace(/(?:[^laeiouy]es|ed|[^laeiouy]e)$/g, '');
word = word.replace(/^y/, '');
return (word.match(/[aeiouy]{1,2}/g) || []).length;
}

// Get the text content of the web page
const textContent = document.body.textContent || '';

// Calculate the Flesch-Kincaid Grade Level score and log it to the console
const score = calculateFleschKincaid(textContent);
console.log(`Flesch-Kincaid Grade Level Score: ${score}`);