User:Polygnotus/Scripts/GetAPIBatch.js: Difference between revisions

Revision as of 22:15, 26 August 2024

Revision as of 22:17, 26 August 2024

Line 14:

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

z-index: 9999;

max-width: 300px;

}

#word-display, #typo-display {

font-size: 1.2rem;

margin-bottom: 0.5rem;

min-height: 1.5rem;

};

#typo-display {

wordcolor: parts[0],red;

}

#next-button {

Line 34 ⟶ 37:

margin-top: 0.5rem;

font-style: italic;

}

#article-content {

margin-top: 1rem;

max-height: 200px;

overflow-y: auto;

border: 1px solid #ccc;

padding: 10px;

}

`;

Line 43 ⟶ 53:

container.id = 'word-fetcher-container';

container.innerHTML = `

<div id="word-display">ClickCorrect: 'Next Word' to start</div>

<buttondiv id="nexttypo-buttondisplay">NextTypo: Word</buttondiv>

<div id="article-name"></div>

<button id="next-button">Next Word</button>

<div id="article-content"></div>

<div id="debug-info"></div>

`;

Line 55 ⟶ 67:

this.words = [];

this.currentIndex = 0;

this.displayElementwordDisplayElement = document.getElementById('word-display');

this.typoDisplayElement = document.getElementById('typo-display');

this.nextButton = document.getElementById('next-button');

this.debugElement = document.getElementById('debug-info');

this.articleNameElement = document.getElementById('article-name');

this.articleContentElement = document.getElementById('article-content');

this.nextButton.addEventListener('click', () => this.displayNextWord());

Line 79 ⟶ 93:

console.error('Error fetching words:', error);

this.debugElement.textContent = `Error: ${error.message}. CORS issue likely. Check console and ensure server allows CORS.`;

this.displayElementwordDisplayElement.textContent = 'Unable to fetch words. See debug info.';

}

}

parseWordString(wordString) {

const parts[correct, typo, articleName] = wordString.split('|');

return { correct, typo, articleName };

word: parts[0],

articleName: parts[2] || 'Unknown Article'

};

}

Line 98 ⟶ 109:

if (this.words.length > 0) {

const currentWord = this.words[this.currentIndex];

this.displayElementwordDisplayElement.textContent = `Correct: ${currentWord.wordcorrect}`;

this.typoDisplayElement.textContent = `Typo: ${currentWord.typo}`;

this.articleNameElement.textContent = `Article: ${currentWord.articleName}`;

this.currentIndex++;

await this.loadArticle(currentWord.articleName);

if (this.currentIndex >= this.words.length) {

Line 108 ⟶ 122:

}

} else {

this.displayElementwordDisplayElement.textContent = 'No words available. Check debug info.';

this.typoDisplayElement.textContent = '';

this.articleNameElement.textContent = '';

this.articleContentElement.textContent = '';

}

this.updateDebugInfo();

}

async loadArticle(articleName) {

try {

// Replace this with the actual API endpoint for fetching article content

const response = await fetch(`http://localhost:8082/article?name=${encodeURIComponent(articleName)}`, {

mode: 'cors',

});

if (!response.ok) {

throw new Error('Network response was not ok');

}

const articleContent = await response.text();

this.articleContentElement.innerHTML = articleContent;

} catch (error) {

console.error('Error fetching article:', error);

this.articleContentElement.textContent = `Error loading article: ${error.message}`;

}

}