Are there any frameworks for adding html objects to the question?

WaniKani API And Third-Party Apps
1

Goal is to do the following:

image
image1219×334 24.8 KB

I know how to add elements to the question area manually.

  window.addEventListener('didAnswerQuestion', (ev) => {
    let divQuestion = document.querySelector("#turbo-body > div.quiz > div > div.character-header.character-header--vocabulary > div > div.character-header__characters");
     divQuestion.insertAdjacentHTML('afterend', `<div class="reading-with-audio__reading" lang="ja">${reading}</div>`);
  })

But it’s pretty untidy, and I must manually delete the div later when moving to the next question.

Are there any existing user script frameworks that will help to manage adding objects to the question area? It’s just quite untidy to do so much manipulation.

2

I’ve only made one extension so far myself and am not too familiar with the WK Open Framework yet, however, I don’t see too much wrong doing it this way. For starters, though I would recommend creating a permanent div (under character-header__content instead of character-header__characters) for the pitch accent and then toggling the display of it whilst changing it’s content upon an answer (instead of creating a new one and deleting it each time):

(note that this code obviously won’t work, I have no idea how to actually hook into answer / continue events)

(function() 
{
    'use strict';

    const CONTAINER = document.getElementsByClassName("character-header__content")[0];
    const accent = document.createElement("div");

    accent.innerHTML = "down down up";
    accent.style.display = "hidden";

    CONTAINER.append(div);

    on("answer", () =>
    {
        accent.innerHTML = "up up down";
        accent.style.display = "block";
    });

    on("next", () =>
    {
        accent.style.display = "hidden";
    });
})();

If you can’t do this because of some circumstances with your script, or it’s just not possible for WK reasons, then ignore this please :upside_down_face:.

1 Like
3

Thanks.
I ended up just creating my own div and managing it’s lifecyle.

1 Like