Style reading quiz feedback by result

tools/test-compose.js

@@ -109,6 +109,26 @@ let keep = false;
         await page.getByRole('heading', { name: 'Reading is closed right now' }).waitFor();
         await page.getByRole('button', { name: 'Start five-question challenge' }).click();
         await page.getByText('Question 1 of 5').waitFor();
+        const firstPrompt = await page.locator('.reading-gate-question h2').textContent();
+        const firstTitle = await page.locator('.reading-gate-question .muted').textContent();
+        const firstNumber = /question (\d)/.exec(firstPrompt)[1];
+        const answerBox = page.getByRole('textbox', { name: 'Your answer' });
+        await answerBox.fill('wrong');
+        await page.getByRole('button', { name: 'Check answer' }).click();
+        const retryNotice = page.locator('.reading-gate-message[data-tone="retry"]');
+        await retryNotice.waitFor();
+        const retryStyle = await retryNotice.evaluate(el => ({ color: getComputedStyle(el).color,
+          border: getComputedStyle(el).borderTopWidth, background: getComputedStyle(el).backgroundColor }));
+        assert.notEqual(retryStyle.border, '0px');
+        await answerBox.fill((firstTitle === 'Moon Garden' ? 'moonanswer' : 'rainanswer') + firstNumber);
+        await page.getByRole('button', { name: 'Check answer' }).click();
+        const successNotice = page.locator('.reading-gate-message[data-tone="success"]');
+        await successNotice.waitFor();
+        const successStyle = await successNotice.evaluate(el => ({ color: getComputedStyle(el).color,
+          background: getComputedStyle(el).backgroundColor }));
+        assert.notEqual(successStyle.color, retryStyle.color);
+        assert.notEqual(successStyle.background, retryStyle.background);
+        await page.getByText('Question 2 of 5').waitFor();
         await page.goto(url + '/manga.html?m=' + encodeURIComponent(manga));
         await page.goto(url + '/read.html?m=' + encodeURIComponent(manga) + '&c=' + encodeURIComponent(chapter));
         await page.getByRole('button', { name: 'Start five-question challenge' }).waitFor();