Question

我得到了一个带有测试问题的.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>

任何有关如何上手的指南都将受到赞赏。

Answer 1

（我对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>

如何将JSON内容转换为HTML？

1 个答案: