main.js

// Use the storyContent to create an Ink story
var story = new inkjs.Story(storyContent);

// Save a reference to the storyContainer where text will be added
var storyContainer = document.getElementById("story");

function continueStory() {

  // Check if there is more content in the story
  if(story.canContinue) {

    // Get ink to generate the next paragraph
    var paragraphText = story.Continue();

    // Find the position where the colon start
    var dialogueTag = paragraphText.indexOf(':');
    // Get the string from the beginning to the position of colon
    var speaker = paragraphText.substring(0, dialogueTag);

    // Create paragraph element
    var paragraphElement = document.createElement('p');

    // Check if speaker is an empty string
    if(speaker.length > 0) {
      // Add a CSS class matching the speaker
      paragraphElement.classList.add(speaker);
    }

    // Add the text to the P-element
    paragraphElement.innerHTML = paragraphText;
    // Append the P-element to the storyContainer
    storyContainer.appendChild(paragraphElement);

  }

}

// Call continueStory() to start
continueStory();

// Listen for the "click" event and show text
window.addEventListener("click", continueStory);