Stage 5: My Research | Unit 12

STEP 1

The Research Section is Yours

Every other section in your site was either pre-built or filled in from vetted sources. The My Research section is different. It contains only your writing, your voice, and your analysis of the topic you chose to investigate.

Scroll to the bottom of the Live Preview to see the My Research section. It has a two-panel layout: the left panel is the input area (the <textarea> in your HTML), and the right panel is the styled, published version that updates as you type.

How It Works

There is a small JavaScript function in the code that watches the <textarea> for changes. Every time the content changes, it reads the text, splits it into paragraphs, and displays each paragraph in the styled output panel on the right. When you edit the textarea content in your code editor, the preview refreshes and the research output updates automatically.

STEP 2

The oninput Event

The live update uses a JavaScript event you have not seen before: oninput. Here is how it is wired up:

// oninput fires every time the textarea content changes <textarea id="research-input"
oninput="renderResearch()">

You have already used onclick (fires on click) and onkeydown (fires on key press). oninput fires whenever the value of an input or textarea element changes, whether from typing, pasting, or any other edit. It is the right event for a live-preview text editor.

// The renderResearch function (already in your code) function renderResearch() {
  var val = document.getElementById('research-input').value;
  var paras = val.split(/\n\n+/).filter(...);
  output.innerHTML = paras.map(function(p){
    return '<p>' + p.trim() + '</p>';
  }).join('');
}

The function splits the textarea value on double line breaks (which is how Google Docs separates paragraphs when you copy text). Each chunk becomes a <p> tag in the output. This is the same pattern used in real-world rich text editors.

STEP 3

Add Your Research Writing

This is the main task for Stage 5. Here is the full process:

Open the Google Doc where you have been writing your research summary for this era.
If you have not started writing yet: open a Google Doc now and write at least 2-3 paragraphs about the treaty, law, court case, or event you researched. Use your sources from the hero section. Write in your own words.
Select all your text in Google Docs (Cmd+A or Ctrl+A) and copy it (Cmd+C or Ctrl+C).
In your code editor, find the <textarea id="research-input"> element.
Delete the placeholder text inside the textarea tags.
Paste your Google Docs writing between the opening and closing textarea tags.
Check the Live Preview. Your writing should now appear in the styled research output panel.

Your Writing Replaces the Placeholder

The textarea in the HTML looks like this: <textarea id="research-input">placeholder text here</textarea>. You are replacing the text between those tags with your own writing. The textarea tags stay. Only the content changes.

STEP 4

Add Your Name and Topic

Find the .research-byline element in your code. It contains two placeholders: [Your Name] and [Your Topic]. Replace both with your actual name and the topic you researched.

// Find this in the code and update the placeholders <p class="research-byline">
Research by <strong>[Your Name]</strong>
• Topic: [Your Topic]
</p>

Stage 5 Complete!

Your research is now published on your site. In Stage 6 you will add two more sections: How This Era Shapes Us Today (with three reflection cards, one of which you write yourself) and the footer with your sources list.