|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | | - <head> |
4 | | - <meta charset="utf-8" /> |
5 | | - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | | - <title><%= $filename %></title> |
7 | 3 |
|
8 | | - <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> |
9 | | - <script |
10 | | - src="https://cdn.jsdelivr.net/npm/@openwebwork/[email protected]/dist/pg-codemirror-editor.js" |
11 | | - defer |
12 | | - ></script> |
13 | | - <link rel="stylesheet" href="<%= $pg_doc_home %>/sample-problem.css" /> |
14 | | - </head> |
| 4 | +<head> |
| 5 | + <meta charset="utf-8"> |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 7 | + <title><%= $filename %></title> |
15 | 8 |
|
16 | | - % # Default explanations % my $default = { % preamble => 'These standard macros need to be loaded.', % setup => |
17 | | - 'This perl code sets up the problem.', % statement => 'This is the problem statement in PGML.', % answer => 'This is |
18 | | - used for answer checking.', % solution => 'A solution should be provided here.' % }; |
| 9 | + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> |
| 10 | + <script |
| 11 | + src="https://cdn.jsdelivr.net/npm/@openwebwork/[email protected]/dist/pg-codemirror-editor.js" |
| 12 | + defer></script> |
| 13 | + <link rel="stylesheet" href="<%= $pg_doc_home %>/sample-problem.css"> |
| 14 | +</head> |
19 | 15 |
|
20 | | - <body> |
21 | | - <div class="container-fluid p-3"> |
22 | | - <div class="row"> |
23 | | - <div class="col"> |
24 | | - <h1><%= $name %></h1> |
25 | | - <p><%= $description %></p> |
26 | | - </div> |
27 | | - <div class="col text-end"> |
28 | | - <a href="<%= $pg_doc_home =%>/../">Return to the PG docs home</a> |
29 | | - </div> |
| 16 | +% # Default explanations |
| 17 | +% my $default = { |
| 18 | + % preamble => 'These standard macros need to be loaded.', |
| 19 | + % setup => 'This perl code sets up the problem.', |
| 20 | + % statement => 'This is the problem statement in PGML.', |
| 21 | + % answer => 'This is used for answer checking.', |
| 22 | + % solution => 'A solution should be provided here.' |
| 23 | +% }; |
| 24 | + |
| 25 | +<body> |
| 26 | + <div class="container-fluid p-3"> |
| 27 | + <div class="row"> |
| 28 | + <div class="col"> |
| 29 | + <h1><%= $name %></h1> |
| 30 | + <p><%= $description %></p> |
30 | 31 | </div> |
31 | | - <div class="row"> |
32 | | - <div class="col"> |
33 | | - <h2>Complete Code</h2> |
34 | | - <p>Download file: <a href="<%= $filename =%>"><%= $filename =%></a></p> |
35 | | - </div> |
36 | | - % if (scalar(@{$metadata->{$filename}{macros}}) > 0 ) { |
| 32 | + <div class="col text-end"> |
| 33 | + <a href="<%= $pg_doc_home =%>/../">Return to the PG docs home</a> |
| 34 | + </div> |
| 35 | + </div> |
| 36 | + <div class="row"> |
| 37 | + <div class="col"> |
| 38 | + <h2>Complete Code</h2> |
| 39 | + <p>Download file: <a href="<%= $filename =%>"><%= $filename =%></a></p> |
| 40 | + </div> |
| 41 | + % if (scalar(@{$metadata->{$filename}{macros}}) > 0 ) { |
37 | 42 | <div class="col"> |
38 | 43 | <h2>POD for Macro Files</h2> |
39 | 44 | <ul> |
40 | | - % for my $macro (@{$metadata->{$filename}{macros}}) { % if ($macro_locations->{$macro}) { |
41 | | - <li><a href="<%= $pod_root %>/<%= $macro_locations->{$macro} %>"><%= $macro =%></a></li> |
42 | | - % } else { |
43 | | - <li class="text-danger"><%= $macro %></li> |
44 | | - % } % } |
45 | | - </ul> |
46 | | - </div> |
47 | | - %} % if ($metadata->{$filename}{related} && scalar(@{$metadata->{$filename}{related}}) > 0) { |
48 | | - <div class="col"> |
49 | | - <h2>See Also</h2> |
50 | | - <ul> |
51 | | - % for (@{$metadata->{$filename}{related}}) { |
52 | | - <li> |
53 | | - <a href="<%= $pg_doc_home =%>/<%= $metadata->{$_}{dir} =%>/<%= $_ =~ s/.pg$//r =%>.html"> |
54 | | - <%= $metadata->{$_}{name} =%></a |
55 | | - > |
56 | | - </li> |
| 45 | + % for my $macro (@{$metadata->{$filename}{macros}}) { |
| 46 | + % if ($macro_locations->{$macro}) { |
| 47 | + <li><a href="<%= $pod_root %>/<%= $macro_locations->{$macro} %>"><%= $macro =%></a></li> |
| 48 | + % } else { |
| 49 | + <li class="text-danger"><%= $macro %></li> |
| 50 | + % } |
57 | 51 | % } |
58 | 52 | </ul> |
59 | 53 | </div> |
60 | 54 | % } |
| 55 | + % if ($metadata->{$filename}{related} && scalar(@{$metadata->{$filename}{related}}) > 0) { |
| 56 | + <div class="col"> |
| 57 | + <h2>See Also</h2> |
| 58 | + <ul> |
| 59 | + % for (@{$metadata->{$filename}{related}}) { |
| 60 | + <li> |
| 61 | + <a href="<%= $pg_doc_home =%>/<%= $metadata->{$_}{dir} =%>/<%= $_ =~ s/.pg$//r =%>.html"> |
| 62 | + <%= $metadata->{$_}{name} =%> |
| 63 | + </a> |
| 64 | + </li> |
| 65 | + % } |
| 66 | + </ul> |
61 | 67 | </div> |
62 | | - <div class="row"> |
63 | | - <div class="col text-center"><h2 class="fw-bold fs-3">PG problem file</h2></div> |
64 | | - <div class="col text-center"><h2 class="fw-bold fs-3">Explanation</h2></div> |
65 | | - </div> |
66 | | - % for (@$blocks) { |
| 68 | + % } |
| 69 | + </div> |
| 70 | + <div class="row"> |
| 71 | + <div class="col text-center"><h2 class="fw-bold fs-3">PG problem file</h2></div> |
| 72 | + <div class="col text-center"><h2 class="fw-bold fs-3">Explanation</h2></div> |
| 73 | + </div> |
| 74 | + % for (@$blocks) { |
67 | 75 | <div class="row"> |
68 | 76 | <div class="col-sm-12 col-md-6 order-md-first order-last p-0 position-relative overflow-x-hidden"> |
69 | | - <button |
70 | | - class="clipboard-btn btn btn-sm btn-secondary position-absolute top-0 end-0 me-1 mt-1 z-1" |
71 | | - type="button" |
72 | | - data-code="<%== $_->{code} %>" |
73 | | - aria-label="copy to clipboard" |
74 | | - > |
75 | | - <svg |
76 | | - xmlns="http://www.w3.org/2000/svg" |
77 | | - width="16" |
78 | | - height="16" |
79 | | - fill="currentColor" |
80 | | - class="bi bi-clipboard-fill" |
81 | | - viewBox="0 0 16 16" |
82 | | - > |
83 | | - <path |
84 | | - fill-rule="evenodd" |
85 | | - d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z" |
86 | | - /> |
| 77 | + <button class="clipboard-btn btn btn-sm btn-secondary position-absolute top-0 end-0 me-1 mt-1 z-1" |
| 78 | + type="button" data-code="<%== $_->{code} %>" aria-label="copy to clipboard"> |
| 79 | + <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" |
| 80 | + class="bi bi-clipboard-fill" viewBox="0 0 16 16"> |
| 81 | + <path fill-rule="evenodd" d="M10 1.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-1Zm-5 0A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5v1A1.5 1.5 0 0 1 9.5 4h-3A1.5 1.5 0 0 1 5 2.5v-1Zm-2 0h1v1A2.5 2.5 0 0 0 6.5 5h3A2.5 2.5 0 0 0 12 2.5v-1h1a2 2 0 0 1 2 2V14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3.5a2 2 0 0 1 2-2Z"/> |
87 | 82 | </svg> |
88 | 83 | </button> |
89 | | - <pre class="PGCodeMirror m-0 h-100 p-3 border border-secondary overflow-x-scroll"> |
90 | | -<%== $_->{code} %> |
91 | | - </pre |
92 | | - > |
| 84 | + <pre class="PGCodeMirror m-0 h-100 p-3 border border-secondary overflow-x-scroll"><%== $_->{code} %></pre> |
93 | 85 | </div> |
94 | | - <div |
95 | | - class="explanation <%= $_->{section} %> col-sm-12 col-md-6 order-md-last order-first p-3 border border-dark" |
96 | | - > |
| 86 | + <div class="explanation <%= $_->{section} %> col-sm-12 col-md-6 order-md-last order-first p-3 border border-dark"> |
97 | 87 | <p><b><%= ucfirst($_->{section}) %></b></p> |
98 | | - % if ($_->{doc}) { <%= $_->{doc} %> %} else { <%= $default->{$_->{section}} %> %} |
| 88 | + % if ($_->{doc}) { |
| 89 | + <%= $_->{doc} %> |
| 90 | + % } else { |
| 91 | + <%= $default->{$_->{section}} %> |
| 92 | + % } |
99 | 93 | </div> |
100 | 94 | </div> |
101 | | - % } |
102 | | - </div> |
| 95 | + % } |
| 96 | + </div> |
| 97 | + |
| 98 | + <script type="module"> |
| 99 | + for (const pre of document.body.querySelectorAll('pre.PGCodeMirror')) { |
| 100 | + PGCodeMirrorEditor.runMode(pre.textContent, pre); |
| 101 | + } |
103 | 102 |
|
104 | | - <script type="module"> |
105 | | - for (const pre of document.body.querySelectorAll('pre.PGCodeMirror')) { |
106 | | - PGCodeMirrorEditor.runMode(pre.textContent, pre); |
107 | | - } |
| 103 | + for (const btn of document.querySelectorAll('.clipboard-btn')) { |
| 104 | + if (navigator.clipboard) |
| 105 | + btn.addEventListener('click', () => navigator.clipboard.writeText(btn.dataset.code)); |
| 106 | + else btn?.remove(); |
| 107 | + } |
| 108 | + </script> |
| 109 | +</body> |
108 | 110 |
|
109 | | - for (const btn of document.querySelectorAll('.clipboard-btn')) { |
110 | | - if (navigator.clipboard) |
111 | | - btn.addEventListener('click', () => navigator.clipboard.writeText(btn.dataset.code)); |
112 | | - else btn?.remove(); |
113 | | - } |
114 | | - </script> |
115 | | - </body> |
116 | 111 | </html> |
0 commit comments