Documentation

CDN & Quick Start

Paste these script tags into your site's header or footer to enable all components:

<!-- Components -->
<script src="https://scripts.teacherjake.com/tj-reader.js" defer></script>
<script src="https://scripts.teacherjake.com/tj-grammar-hearts.js" defer></script>
<script src="https://scripts.teacherjake.com/tj-info-gap.js" defer></script>
<script src="https://scripts.teacherjake.com/tj-listening.js" defer></script>
<script src="https://scripts.teacherjake.com/tj-speed-review.js" defer></script>
<script src="https://scripts.teacherjake.com/tj-quiz-element.js" defer></script>
<script src="https://scripts.teacherjake.com/tj-chapter-book.js" defer></script>

<!-- Required Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&family=Inter:wght@400;600&display=swap" rel="stylesheet">

Global Features

Components

1. LBL Reader (<lbl-reader>)

An interactive story reader with word highlighting, Text-to-Speech, and automatic matching activities.

<lbl-reader 
  lang-original="en" 
  lang-translation="th" 
  story-title="My Daily Routine">
[
  {
    "original": "I wake up at 7 AM every day.",
    "fullTranslation": "ฉันตื่นนอนตอน 7 โมงเช้าทุกวัน",
    "translationOptions": ["ตื่นนอน", "นอนหลับ", "แปรงฟัน"],
    "correctTranslationIndex": 0,
    "highlightIndex": 1
  }
]
</lbl-reader>

2. Grammar Hearts (<grammar-hearts>)

A gamified grammar practice component with lives, multiple-choice, and sentence scrambling.

<grammar-hearts hearts="3" round-size="10">
{
  "title": "Daily Routines Quiz",
  "questions": [
    {
      "type": "multiple-choice",
      "question": "She ___ (work) every day.",
      "options": ["works", "is working"],
      "correctIndex": 0
    }
  ]
}
</grammar-hearts>

3. Info Gap (<tj-info-gap>)

Collaborative multi-player activity for communication practice or single-player mode with TTS partner.

<tj-info-gap>
{
  "topic": "Ordering Delivery",
  "blocks": [
    {
      "text_holder_id": 1,
      "text": "Wanchai wants pad thai.",
      "questions": [
        { "asker_id": 2, "question": "What does he want?", "options": ["Pad Thai", "Rice"], "correct_answer": "Pad Thai" }
      ]
    }
  ]
}
</tj-info-gap>

4. Listening (<tj-listening>)

Comprehensive listening lesson with vocabulary preview, dialogue playback, and comprehension quiz.

<tj-listening 
  audio-listening="url_to_mp3">
{
  "title": "Ordering Food",
  "lang": "en-US",
  "vocab": [
    { "word": "bill", "definition": "Charges for food.", "example": "Bill please." }
  ],
  "listening": {
    "transcript": "Waiter: Hello...",
    "questions": [
      { "question": "What did they order?", "options": ["Food", "Drink"], "correct": "Food" }
    ]
  }
}
</tj-listening>

5. Speed Review (<tj-speed-review>)

Fast-paced review activity with a countdown timer. Points awarded based on speed.

<tj-speed-review time-limit="15" round-size="10">
[
  {
    "title": "Topic Title",
    "questions": [
      {
        "question": "The question text...",
        "options": ["Choice A", "Choice B"],
        "answer": "Choice A"
      }
    ]
  }
]
</tj-speed-review>

            
            
6. Quiz Element (<tj-quiz-element>)
            
A flexible quiz component supporting reading passages, vocabulary matching, and cloze (fill-in-the-blank) sections. Optimized for Google Apps Script integration.
            
<tj-quiz-element submission-url="YOUR_GAS_URL">
  My Quiz Title
  ---text
  This is a reading passage...
  ---instructions
  Choose the best answer for each question.
  ---questions-3
  Q: What happened?
  A: Nothing
  A: Everything [correct]
  ---vocab-5
  Word: Definition
  Concept: Explanation
  ---cloze-2
  The [cat] sat on the [mat].
</tj-quiz-element>

            

                

                    
🔢 Limiters
                    
Append -N to any section (e.g., ---questions-3) to randomly show N items.
                
                

                    
📝 Instructions
                    
Use ---instructions to add custom guidance between quiz sections.
                
                

                    
🔤 Vocab Syntax
                    
Format as Word: Definition (one per line) for matching activities.
                
            

            
            
7. Chapter Book (<tj-chapter-book>)
            
A multi-chapter reading companion with built-in TTS, translation toggles, and comprehension checks.
            
<tj-chapter-book>
{
  "title": "My Adventure",
  "chapters": [
    {
      "title": "Chapter 1",
      "text": "Once upon a time...",
      "translation": "กาลครั้งหนึ่ง...",
      "quiz": [
        { "question": "Who was there?", "options": ["Hero", "Villain"], "answer": 0 }
      ]
    }
  ]
}
</tj-chapter-book>