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() {

  // 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');
  // 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();