Lesson Reflections Saver Userscript

[Raymond-Adams]

Lesson Reflections Saver Userscript

Here's a simple userscript to store (and copy) responses from the Knowledge Check sections of TOP lessons.

Code

Click to install: https://github.com/Raymond-Adams/userscripts/raw/main/TOP-Lesson-Reflections-Saver/lesson-reflections.user.js

// ==UserScript==
// @name        TOP Lesson Reflections Saver
// @description Save and copy responses to TOP knowledge check sections.
// @author      Raymond Adams
// @namespace   https://github.com/Raymond-Adams/
// @version     1.0.0
// @match       https://www.theodinproject.com/lessons/*
// @run-at      document-end
// @grant       none
// @license     MIT
// ==/UserScript==

const knowledgeCheck = document.querySelector('#knowledge-check');
const questions = [...knowledgeCheck.querySelectorAll('li')];
const key = window.location.href.split('/').pop();
let responses = JSON.parse(localStorage.getItem(key));

const loadStyle = (cssText) => {
  const styles = document.createElement('style');
  styles.textContent = cssText;
  document.head.append(styles);
};

const resizeInput = (textarea) => {
  textarea.style.height = '40px';
  textarea.style.height = `${textarea.scrollHeight}px`;
};

const onInput = (e) => {
  resizeInput(e.target);

  // Save responses to localStorage
  responses = questions.map(
    (li) => [li.textContent, li.nextSibling.value]
  );
  localStorage.setItem(key, JSON.stringify(responses));
};

const copyToClipboard = (e) => {
  const formattedResponses = responses.map(
    (res) => res.join('\n')
  ).join('\n\n');

  navigator.clipboard.writeText(formattedResponses);
  e.target.textContent = 'Copied!';
};

loadStyle(`
  .response-text {
    height: 40px;
    width: 100%;
    resize: none;
    overflow: hidden;
  }

  .response-copy-btn {
    background: #49b349;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 0.375rem;
    color: white;
  }

  .response-copy-btn:hover {
    background: #329232;
  }
`);

questions.forEach((li, i) => {
  const textarea = document.createElement('textarea');
  textarea.classList.add('response-text');
  textarea.addEventListener('input', onInput);
  li.after(textarea);

  if (responses === null) return;
  const [question, response] = responses[i];
  if (li.textContent === question) {
    textarea.value = response;
    resizeInput(textarea);
  }
});

const button = document.createElement('button');
button.textContent = 'Copy Responses To Clipboard';
button.classList.add('response-copy-btn');
button.addEventListener('click', copyToClipboard);
knowledgeCheck.append(button);

[CouchofTomato]

Hey @Raymond-Adams

This is neat. Are you seeing a use case for it in our course, or is it just something you want others to be aware of in case it's useful for them?

[Raymond-Adams]

Thanks! Textboxes incentivize articulate responses in words, rather than passive mental reviews, and tracking these responses might be helpful (and potentially motivating) for beginners to monitor their progress. I find that old answers are insightful to compare former ways of thinking with new ones. In either case, the functionality is not necessary and may bloat extensive Knowledge Check sections hence the userscript.

[CouchofTomato]

Thanks @Raymond-Adams . If you think it could be a useful feature generall is would probably be better to make an issue which can then be discussed by the team.