Showing back of the card in another monitor

Anki Card Design
1

I want to review my cards and showing the back of the card in another monitor at the same time, so i can scan through the answer at another screen, while watching the question in the main screen. . Is there any way to do that?

2

Typically, a question doesn’t take up much space, one or three sentences at most. When viewing the back, you can display both the question and answer. If you absolutely must always display the question, you can use a style to lock it at the top, leaving the rest of the text to scroll. Dual monitors are great, but your head will get tired of spinning back and forth.
Describe your learning process, and why do you need dual monitors?

3

the question is image occlusion and i added multiple phtotos in the remark section. Therefore I need to scroll up and down to check the phtotos in the remark while seeing the question

4

please let me know if it is clear enough, thank you.

5

It’s difficult to do this simultaneously; you still have to look at the same page first, then come back. This problem also happens with regular browser pages and PDFs. The AI ​​suggests stretching the window across two screens. Perhaps that would solve the problem, but I don’t have space to test it here yet; I have one screen, and the second one needs to be brought in and installed.
But even with two screens, they only have one scrollbar. You need two separate sections, so it’s like that. This all needs to be done specifically.
In browsers, this is easier to solve, especially when there’s an anchor, that is, a link to the same page. We navigate to it, see what we need, duplicate the page or multiple duplicates, then return to that page and maybe view both pages side by side.
Another solution is to collapse and expand the block.

I haven’t looked at another add-on solution yet; maybe it can be done, but I want it to work everywhere using JavaScript. This one’s more complicated, since we don’t have two monitors on our smartphone :slight_smile:

So, I tried using tabs so there would be buttons at the bottom of the screen so I could quickly navigate and look at what I wanted. Scroll positions are remembered, so I even added two “Comments” buttons. If there are a lot of images, you can open one in one, and another in the other, and the positions will be different. Essentially, with these three buttons, it’s like having three more monitors.

I’ll provide the code for this test:

image
image618×653 126 KB

Back

<div class="tabs">
    <button class="tab active" onclick="showTab(this, 'tab1')">Image</button>
    <button class="tab" onclick="showTab(this, 'tab2')">• {{#Back Extra}}Back Extra{{/Back Extra}}</button>     
    <button class="tab" onclick="showTab(this, 'tab3')">• {{#Comments}}Comments{{/Comments}}</button>   
    <button class="tab" onclick="showTab(this, 'tab4')">• {{#Comments}}Comments{{/Comments}}</button>  
</div>

<div id="tab1" class="tabcontent active">
{{#Header}}<div>{{Header}}</div>{{/Header}}
<div style="display: none">{{cloze:Occlusion}}</div>
<div id="err"></div>
<div id="image-occlusion-container">
    {{Image}}
    <canvas id="image-occlusion-canvas"></canvas>
</div>


<div><button id="toggle">Toggle Masks</button></div>
</div>
{{#Back Extra}}
<div id="tab2" class="tabcontent"><div>{{Back Extra}}</div></div>
{{/Back Extra}}


{{#Comments}}
<div id="tab3" class="tabcontent"><div>{{Comments}}</div></div>
{{/Comments}}
{{#Comments}}
<div id="tab4" class="tabcontent"><div>{{Comments}}</div></div>
{{/Comments}}

<script>
try {
    anki.imageOcclusion.setup();
} catch (exc) {
    document.getElementById("err").innerHTML = `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}

function showTab(btn, id) {

    document.querySelectorAll('.tab').forEach(el =>
        el.classList.remove('active')
    );

    document.querySelectorAll('.tabcontent').forEach(el =>
        el.classList.remove('active')
    );

    btn.classList.add('active');
    document.getElementById(id).classList.add('active');
}

</script>

css:

#image-occlusion-canvas {
    --inactive-shape-color: #ffeba2;
    --active-shape-color: #ff8e8e;
    --inactive-shape-border: 1px #212121;
    --active-shape-border: 1px #212121;
    --highlight-shape-color: #ff8e8e00;
    --highlight-shape-border: 1px #ff8e8e;
}

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

.tabs {
    border-bottom: 1px solid #aaa;    
    margin-bottom: 5px;
    color: black;    
    min-height: 30px;
    width: 100%;
    background-color: #555;
    padding: 0px;
    position: fixed;
    left: 0px;
    bottom: -5px;
}

.tabs button {
    padding-top: 3px;
    padding-bottom: 3px;
    margin: 0px;
}

.tab {
    border: 1px solid #aaa;
    border-bottom: none;
    background: #e9e9e9;
    padding: 6px 12px;
    margin-right: 2px;
    cursor: pointer;
    border-radius: 5px 5px 0 0;    
}

.tab:hover {
    background: #bbb;
}

.tab.active {
    background: white;
    position: relative;
    top: 1px;
    color: green;
}

.tabcontent {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 35px;
    overflow-y: auto;
}

.tabcontent.active {
    display: block;
}