Как преобразовать контент JSON в HTML? - PullRequest
0 голосов
/ 10 июля 2019

Мне дали файл .json с тестовыми вопросами. Мне нужно конвертировать их в формат HTML. Ниже приведены примеры кода json, который мне дали, и того, как мне нужно, чтобы этот контент выглядел в HTML.

Я не уверен, с чего начать процесс создания сценариев XSLT.

Это один вопрос из файла .json:

{
                    "qNo": 24,
                    "uAnswer": "",
                    "question": "<p>Kathy knits sweaters and scarves, and she sells them online. She sells her scarves for $18 and her sweaters for $75. In January 2015, Kathy sold 40 items for a total of $1,461. How many more scarves than sweaters did Kathy sell that month?<\/p>",
                    "option": [
                        {
                            "strike": "false",
                            "data": "<p>13<\/p>",
                            "middle": "false"
                        },
                        {
                            "strike": "false",
                            "data": "<p>14<\/p>",
                            "middle": "false"
                        },
                        {
                            "strike": "false",
                            "data": "<p>15<\/p>",
                            "middle": "false"
                        },
                        {
                            "strike": "false",
                            "data": "<p>16<\/p>",
                            "middle": "false"
                        }
                    ],
                    "correct": 1,
                    "explanation": "<p><span fontWeight=\"bold\">Answer: B<\/span><\/p>\n<br><p>Let <span style='font-family: times_new_roman_italic;font-style: italic;'>x<\/span> and <span fontStyle=\"italic\">y<\/span> represent the number of scarves and sweaters Kathy sold, respectively:<\/p>\n<p lineHeight=\"36\"style = 'padding-left: 50px'><tab/><span style='font-family: times_new_roman_italic;font-style: italic;'>x<\/span> + <span fontStyle=\"italic\">y<\/span> = 40 and 18<span style='font-family: times_new_roman_italic;font-style: italic;'>x<\/span> + 75<span fontStyle=\"italic\">y<\/span> = 1,461<\/p>\n<p lineHeight=\"36\">Multiplying the first equation by 18 gives 18<span style='font-family: times_new_roman_italic;font-style: italic;'>x<\/span> + 18<span fontStyle=\"italic\">y<\/span> = 720. <\/p>\n<p lineHeight=\"36\">Subtracting 18<span style='font-family: times_new_roman_italic;font-style: italic;'>x<\/span> + 18<span fontStyle=\"italic\">y<\/span> = 720 from 18<span style='font-family: times_new_roman_italic;font-style: italic;'>x<\/span> + 75<span fontStyle=\"italic\">y<\/span> = 1,461 gives 57<span fontStyle=\"italic\">y<\/span> = 741, and so <span fontStyle=\"italic\">y<\/span> = 741 ÷ 57 = 13. <\/p>\n<p lineHeight=\"36\">So in January 2015, Kathy sold 13 sweaters and 40 − 13 = 27 scarves. <\/p>\n<p lineHeight=\"36\">Finally, she sold 27 − 13 = 14 more scarves than sweaters.<\/p>\n<p/>\n<\/br><\/br><p>**If you want to avoid the algebra, you can just reason it out. Assume Kathy sold 20 scarves and 20 sweaters. <br>Then she would have earned (20 × $18) + (20 × $75) = $1,860, which is $1,860 − $1,461 = $399 more than she actually earned. Reducing the number of sweaters by 1 and increasing the number of scarves by 1 reduces her earnings by $75 − $18 = $57. <br>Since 599 ÷ 57 = 7, <g breakOpportunity=\"none\">she sold 20 − 7 = 13 sweaters and 20 + 7 = 27 scarves.<\/g><\/p>"
                },

Вот как мне нужно, чтобы он выглядел в HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" enumeration="" designation="">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
        <link href="../../assets/css/main.css" title="default" rel="stylesheet" type="text/css" />
        <title>Blank Page</title>
    </head>
    <body>
        <section typeof="ktp:Section" class="ktp-section">
            <section class="ktp-section-meta">
                <h1 property="ktp:title">Test or Section Title</h1>
                <span property="ktp:testName" class="ktp-meta">[add value]</span>
                <span property="ktp:sectionType" class="ktp-meta">[add value]</span>
                <span property="ktp:contentType" class="ktp-meta">assessment</span>
            </section>
            <ol property="ktp:questionSet" typeof="ktp:QuestionSet" class="ktp-question-set">
                <li class="ktp-question-set-meta">
                    <span property="ktp:questionSetType" class="ktp-meta">container</span>
                </li>
                <li property="ktp:question" typeof="ktp:Question" class="ktp-question">
                    <section class="ktp-question-meta">
                        <span property="ktp:interactionType" class="ktp-meta">single-select</span>
                    </section>
                    <section class="ktp-question-stem">
                        <p>Kathy knits sweaters and scarves, and she sells them online. She sells her scarves for $18 and her sweaters for $75. In January 2015, Kathy sold 40 items for a total of $1,461. How many more scarves than sweaters did Kathy sell that month?</p>
                    </section>
                    <ol class="ktp-answer-set">
                        <li property="ktp:answer" typeof="ktp:AnswerCorrect">13</li>
                        <li property="ktp:answer" typeof="ktp:Answer">14</li>
                        <li property="ktp:answer" typeof="ktp:Answer">15</li>
                        <li property="ktp:answer" typeof="ktp:Answer">16</li>
                    </ol>
                    <section property="ktp:feedback" class="ktp-feedback">
                        <p><b>Answer: B</b></p>
                        <p>Let <i>x</i> and <i>y</i> represent the number of scarves and sweaters Kathy sold, respectively:</p>
                        <p><i>x</i> + <i>y</i> = 40 and 18<i>x</i> + 75<i>y</i> = 1,461</p>
                        <p>Multiplying the first equation by 18 gives 18<i>x</i> + 18<i>y</i> = 720.</p>
                        <p>Subtracting 18<i>x</i> + 18<i>y</i> = 720 from 18<i>x</i> + 75<i>y</i> = 1,461 gives 57<i>y</i> = 741, and so <i>y</i> = 741 &#247; 57 = 13.</p>
                        <p>So in January 2015, Kathy sold 13 sweaters and 40 &#8722; 13 = 27 scarves.</p>
                        <p>Finally, she sold 27 &#8722; 13 = 14 more scarves than sweaters.</p>
                        <p>**If you want to avoid the algebra, you can just reason it out. Assume Kathy sold 20 scarves and 20 sweaters.</p>
                        <p>Then she would have earned (20 &#215; $18) + (20 &#215; $75) = $1,860, which is $1,860 &#8722; $1,461 = $399 more than she actually earned. Reducing the number of sweaters by 1 and increasing the number of scarves by 1 reduces her earnings by $75 &#8722; $18 = $57.</p>
                        <p>Since 599 &#247; 57 = 7, she sold 20 &#8722; 7 = 13 sweaters and 20 + 7 = 27 scarves.</p>
                    </section>
                </li>
                <li>
                    <p class="place-top">Test or Section End: Place content above this line</p>
                </li>
            </ol>
        </section>
    </body>
</html>

Любое руководство о том, как я могу начать, было бы очень полезно.

1 Ответ

0 голосов
/ 11 июля 2019

(я озадачен всеми этими странными атрибутами, такими как enumeration и designation, но так как это не совсем уместно, я проигнорирую свою озадаченность).

Предполагая XSLT 3.0, вы могли бы что-то сделатькак это:

<xsl:variable name="data" select="json-doc('input.json')"/>

<xsl:template name="xsl:initial-template">
<html xmlns="http://www.w3.org/1999/xhtml" enumeration="" designation="">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../../assets/css/main.css" />
        <link href="../../assets/css/main.css" title="default" rel="stylesheet" type="text/css" />
        <title>Blank Page</title>
    </head>
    <body>
        <section typeof="ktp:Section" class="ktp-section">
            <section class="ktp-section-meta">
                <h1 property="ktp:title">Test or Section Title</h1>
                <span property="ktp:testName" class="ktp-meta">[add value]</span>
                <span property="ktp:sectionType" class="ktp-meta">[add value]</span>
                <span property="ktp:contentType" class="ktp-meta">assessment</span>
            </section>
            <ol property="ktp:questionSet" typeof="ktp:QuestionSet" class="ktp-question-set">
                <li class="ktp-question-set-meta">
                    <span property="ktp:questionSetType" class="ktp-meta">container</span>
                </li>
                <li property="ktp:question" typeof="ktp:Question" class="ktp-question">
                    <section class="ktp-question-meta">
                        <span property="ktp:interactionType" class="ktp-meta">single-select</span>
                    </section>
                    <section class="ktp-question-stem">
                        <xsl:copy-of select="parse-xml($data?question)"/>
                    </section>
                    <ol class="ktp-answer-set">
                        <xsl:for-each select="$data?option?*">
                          <li property="ktp:answer" typeof="{if (position()=$data?correct) then 'ktp:AnswerCorrect' else 'ktp:Answer'}">{string(parse-xml(?data))}</li>
                    </ol>
                    <section property="ktp:feedback" class="ktp-feedback">
                        <p><b>Answer: B</b></p>
                        <xsl:copy-of select="parse-xml($data?explanation)"/>
                    </section>
                </li>
                <li>
                    <p class="place-top">Test or Section End: Place content above this line</p>
                </li>
            </ol>
        </section>
    </body>
</html>
</xsl:template>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...