exam-knowledge-explanation.blade.php 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. {{-- 知识点讲解完整模板 --}}
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>知识点讲解</title>
  7. <link rel="stylesheet" href="/css/katex/katex.min.css">
  8. @include('pdf.partials.kp-explain-styles')
  9. @include('pdf.partials.katex-scripts')
  10. <script src="/js/math-render.js"></script>
  11. </head>
  12. <body>
  13. <div class="kp-explain">
  14. <div class="kp-explain-header">
  15. <div class="kp-explain-title">知识点讲解</div>
  16. <div class="kp-explain-subtitle">
  17. 本章节用于梳理本卷涉及的知识点,帮助学生在做题前完成预习/复盘。
  18. </div>
  19. </div>
  20. @if(empty($knowledgePoints))
  21. <div class="kp-empty">暂无知识点数据</div>
  22. @else
  23. <div class="kp-list">
  24. @foreach($knowledgePoints as $index => $kp)
  25. <div class="kp-section">
  26. <div class="kp-section-head">
  27. <div class="kp-section-name">{{ $loop->iteration }}、{{ $kp['kp_name'] ?? ($kp['kp_code'] ?? '未命名知识点') }}</div>
  28. </div>
  29. <div class="kp-section-body">
  30. @if(!empty($kp['explanation']))
  31. {{-- 解析 ## 标题分段:## 知识点 和 ## 知识点应用 --}}
  32. @php
  33. $explanation = $kp['explanation'];
  34. // 提取 ## 知识点 部分
  35. preg_match('/##\s*知识点\s*\n([\s\S]*?)(?=##\s*知识点应用|$)/u', $explanation, $knowledgeMatch);
  36. $knowledgeContent = isset($knowledgeMatch[1]) ? trim($knowledgeMatch[1]) : '';
  37. // 提取 ## 知识点应用 部分
  38. preg_match('/##\s*知识点应用\s*\n([\s\S]*)/u', $explanation, $applicationMatch);
  39. $applicationContent = isset($applicationMatch[1]) ? trim($applicationMatch[1]) : '';
  40. @endphp
  41. @if(!empty($knowledgeContent))
  42. <div class="kp-block">
  43. <div class="kp-block-title"><span class="check">✓</span>知识点</div>
  44. <div class="kp-markdown-content">{!! \App\Services\MathFormulaProcessor::processFormulas($knowledgeContent) !!}</div>
  45. </div>
  46. @endif
  47. @if(!empty($applicationContent))
  48. <div class="kp-block">
  49. <div class="kp-block-title"><span class="check">✓</span>知识点应用</div>
  50. <div class="kp-markdown-content">{!! \App\Services\MathFormulaProcessor::processFormulas($applicationContent) !!}</div>
  51. </div>
  52. @endif
  53. @endif
  54. </div>
  55. </div>
  56. @endforeach
  57. </div>
  58. @endif
  59. </div>
  60. <script>
  61. // 确保数学公式渲染系统已初始化
  62. document.addEventListener('DOMContentLoaded', function() {
  63. // 延迟渲染,确保所有脚本加载完成
  64. setTimeout(function() {
  65. // 渲染 kp-markdown-content 中的公式
  66. document.querySelectorAll('.kp-markdown-content').forEach(function(el) {
  67. if (typeof window.renderMathElement === 'function' && el.dataset.rendered !== 'true') {
  68. window.renderMathElement(el);
  69. }
  70. });
  71. // 如果 MathRender 系统可用,使用它
  72. if (typeof window.MathRender !== 'undefined') {
  73. // 临时修改 selector 以渲染 kp-markdown-content
  74. var originalSelector = window.MathRenderConfig.selector;
  75. window.MathRenderConfig.selector = '.kp-markdown-content';
  76. window.MathRender.renderAll();
  77. window.MathRenderConfig.selector = originalSelector;
  78. }
  79. // 触发自定义事件,让其他渲染系统也能响应
  80. document.dispatchEvent(new CustomEvent('math:render'));
  81. }, 100);
  82. // 再次尝试渲染,处理可能的异步加载情况
  83. setTimeout(function() {
  84. document.querySelectorAll('.kp-markdown-content').forEach(function(el) {
  85. if (typeof window.renderMathElement === 'function' && el.dataset.rendered !== 'true') {
  86. window.renderMathElement(el);
  87. }
  88. });
  89. }, 500);
  90. });
  91. </script>
  92. </body>
  93. </html>