• Becoming an eLearning Hacker
  • Glossary
  • Regular Expressions (Regex)
  • Projects
  • Challenges
  • Essential Tools
  • HTML
  • CSS
  • JavaScript
  • Web Scraping
  • Learning Analytics
  • Images
  • Download
  • Translations
  • Challenge 6

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

    JavaScript

    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}`);

    This content is provided to you freely by EdTech Books.

    Access it online or download it at https://edtechbooks.org/elearning_hacker/create_a_fleschkincaid_grade_level_checker.