From b3451728d9556cf42df485dc2747cac7e482d3df Mon Sep 17 00:00:00 2001 From: Wojtek Date: Thu, 15 Oct 2026 12:48:46 +0200 Subject: [PATCH] Style frontend exam view --- README.md | 2 +- .../sql/updates/mysql/1.8.0.sql | 1 + com_testquestions.xml | 5 +- .../com_testquestions/media/egzamin.css | 134 ++++++++++++++++++ .../src/View/Questions/HtmlView.php | 4 + .../tmpl/questions/default.php | 24 ++-- egzamin.css | 129 +++++++++++++++++ 7 files changed, 286 insertions(+), 13 deletions(-) create mode 100644 administrator/components/com_testquestions/sql/updates/mysql/1.8.0.sql create mode 100644 components/com_testquestions/media/egzamin.css create mode 100644 egzamin.css diff --git a/README.md b/README.md index a1d8018..128d8c4 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,6 @@ Szkielet komponentu Joomla 6 do gromadzenia pytań testowych. ## Instalacja -W Joomla wybierz **System → Install → Install from Folder** i wskaż ten katalog. Manifestem instalacyjnym jest `com_testquestions.xml` (wersja 1.7.1). +W Joomla wybierz **System → Install → Install from Folder** i wskaż ten katalog. Manifestem instalacyjnym jest `com_testquestions.xml` (wersja 1.8.0). Po instalacji komponent jest dostępny w panelu administratora jako **Pytania testowe**. diff --git a/administrator/components/com_testquestions/sql/updates/mysql/1.8.0.sql b/administrator/components/com_testquestions/sql/updates/mysql/1.8.0.sql new file mode 100644 index 0000000..4b3f654 --- /dev/null +++ b/administrator/components/com_testquestions/sql/updates/mysql/1.8.0.sql @@ -0,0 +1 @@ +-- No database changes required for version 1.8.0. diff --git a/com_testquestions.xml b/com_testquestions.xml index 1a14fe2..bc14a3a 100644 --- a/com_testquestions.xml +++ b/com_testquestions.xml @@ -4,7 +4,7 @@ 2026-10-14 Komponent GNU General Public License version 2 or later - 1.7.1 + 1.8.0 COM_TESTQUESTIONS_DESCRIPTION com_testquestions Komponent\Component\Testquestions @@ -13,6 +13,9 @@ tmpl language + + egzamin.css + COM_TESTQUESTIONS diff --git a/components/com_testquestions/media/egzamin.css b/components/com_testquestions/media/egzamin.css new file mode 100644 index 0000000..23856e4 --- /dev/null +++ b/components/com_testquestions/media/egzamin.css @@ -0,0 +1,134 @@ +.com-testquestions .timer-container { + position: relative; + width: 120px; + height: 120px; + margin: auto; +} + +.com-testquestions .timer-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + color: #003366; + font-weight: bold; +} + +.com-testquestions .progress-ring__circle { + transition: stroke-dashoffset 1s linear; + transform: rotate(-90deg); + transform-origin: 50% 50%; +} + +.com-testquestions .foto_pyt { + margin: 5px auto; + border: 2px #d4d4d4 none; + border-radius: 4px; + width: 98%; + padding: 5px; + text-align: center; +} + +.com-testquestions .foto_pyt img { + max-width: 100%; + height: auto; +} + +.com-testquestions .pyt { + background-color: #4a86cf; + font-size: 18px; + margin: 25px 5px 11px; + border: 1px #dfe3e7 solid; + border-radius: .25rem; + width: 98%; + padding: 10px; + text-align: left; + color: white; + box-shadow: 4px 4px 4px rgba(0, 0, 0, .4); +} + +.com-testquestions .pyt h2 { + margin: 0; + color: inherit; + font-size: inherit; +} + +.com-testquestions .odp, +.com-testquestions .odpp, +.com-testquestions .odpu, +.com-testquestions .odpup { + font-size: 16px; + margin: 5px; + border: 1px #dfe3e7 solid; + border-radius: .25rem; + width: 98%; + padding: 10px; + text-align: left; + box-shadow: 2px 2px 2px rgba(0, 0, 0, .2); +} + +.com-testquestions .odp { + color: #4a86cf; +} + +.com-testquestions .odpp { + background-color: #dfdfdf; + border-color: #777; + color: #0000ff; +} + +.com-testquestions .odpu { + background-color: #ff0000; + color: #fff; +} + +.com-testquestions .odpup { + background-color: #02f002; + color: #000; +} + +.com-testquestions .odp p, +.com-testquestions .odpp p, +.com-testquestions .odpu p, +.com-testquestions .odpup p, +.com-testquestions .odp input, +.com-testquestions .odpp input, +.com-testquestions .odpu input, +.com-testquestions .odpup input { + margin: 0; +} + +.com-testquestions .answer-list { + padding: 0; + list-style: none; +} + +.com-testquestions .answer-list label { + display: block; + cursor: pointer; +} + +.com-testquestions select.egzamin { + color: #4a86cf; + padding: 5px; + border: solid 1px #dfe3e7; + border-radius: .25rem; + width: 100%; + margin-bottom: 3px; + box-shadow: 4px 4px 4px rgba(0, 0, 0, .4); +} + +.com-testquestions input.egzamin { + color: white; + background: #4a86cf; + padding: 5px; + border: solid 1px #dfe3e7; + border-radius: .25rem; + margin: 3px 10px 5px 0; + box-shadow: 4px 4px 4px rgba(0, 0, 0, .4); +} + +.com-testquestions .test-result { + margin: 15px 5px; +} diff --git a/components/com_testquestions/src/View/Questions/HtmlView.php b/components/com_testquestions/src/View/Questions/HtmlView.php index c6364ee..271c8b5 100644 --- a/components/com_testquestions/src/View/Questions/HtmlView.php +++ b/components/com_testquestions/src/View/Questions/HtmlView.php @@ -42,6 +42,10 @@ class HtmlView extends BaseHtmlView public function display($tpl = null) { + $this->getDocument()->getWebAssetManager()->registerAndUseStyle( + 'com_testquestions.exam', + 'media/com_testquestions/egzamin.css' + ); $this->items = $this->get('Items'); $this->symbol = $this->get('State')->get('filter.test_symbol'); $this->symbols = $this->get('TestSymbols'); diff --git a/components/com_testquestions/tmpl/questions/default.php b/components/com_testquestions/tmpl/questions/default.php index a085005..1f46bf7 100644 --- a/components/com_testquestions/tmpl/questions/default.php +++ b/components/com_testquestions/tmpl/questions/default.php @@ -4,18 +4,18 @@ defined('_JEXEC') or die; use Joomla\CMS\HTML\HTMLHelper; ?> -
+

- symbols as $symbol) : ?> - +
@@ -24,7 +24,7 @@ use Joomla\CMS\HTML\HTMLHelper; symbol !== '') : ?>

: symbol, ENT_QUOTES, 'UTF-8'); ?>

results) : ?> -
+
: results['correct']; ?> / results['total']; ?> (results['percentage'], ENT_QUOTES, 'UTF-8'); ?>%) @@ -36,19 +36,21 @@ use Joomla\CMS\HTML\HTMLHelper;
items as $number => $item) : ?>
-

question; ?>

+

question; ?>

image) : ?> - +
question_type === 'open') : ?> - - +
+ + +
-
    +
      $answerField) : ?> results && $this->results['items'][$item->id]['selected'] === (string) ($answerIndex + 1); ?> results && (string) $item->correct_answer === (string) ($answerIndex + 1); ?> -
    1. +
diff --git a/egzamin.css b/egzamin.css new file mode 100644 index 0000000..942acd9 --- /dev/null +++ b/egzamin.css @@ -0,0 +1,129 @@ +.timer-container { + position: relative; + width: 120px; + height: 120px; + margin: auto; + } + + .timer-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + color: #003366; + font-weight: bold; + } + + .progress-ring__circle { + transition: stroke-dashoffset 1s linear; + transform: rotate(-90deg); + transform-origin: 50% 50%; + } +div.foto_pyt + { + margin:5px; + margin-left:auto; + margin-right:auto; + border:2px #d4d4d4 none; + border-radius:4px; + width:98%; + padding: 5px; + + } +div.pyt + { + background-color:#4a86cf; + font-size: 18px; + margin:25px 5px 11px 5px; + border:1px #dfe3e7 solid; + border-radius: .25rem; + width:98%; + padding: 10px; + text-align:left; + color:white; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); + } +div.odp + { + font-size:16px; + margin:5px 5px 5px 5px; + border:1px #dfe3e7 solid; + border-radius: .25rem;; + width:98%; + padding: 10px; + text-align:left; + color: #4a86cf; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + } + +div.pyt p, div.odp p,div.odpp p, div.odp input,div.odpp input,div.odpup input{ + margin: 0px; +} + +div.odpp + { + background-color:#dfdfdf; + font-size:16px; + margin:5px 5px 5px 5px; + border:1px #777 solid; + border-radius:4px; + width:98%; + padding: 10px; + text-align:left; + color:blue; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + } +div.odpu + { + background-color:#ff0000; + font-size:16px; + margin:5px 5px 5px 5px; + border:1px #dfe3e7 solid; + border-radius:4px; + width:98%; + padding: 10px; + text-align:left; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + } +div.odpup + { + background-color:#02f002; + font-size:16px; + margin:5px 5px 5px 5px; + border:1px #dfe3e7 solid; + border-radius:4px; + width:98%; + padding: 10px; + text-align:left; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); + } + + select.egzamin + { + color:#4a86cf; + padding:5px; + border: solid 1px #dfe3e7; + border-radius: .25rem; + width: -moz-available; + width: -webkit-fill-available; + margin-bottom: 3px; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); + } + input.egzamin + { + color: white; + background: #4a86cf; + padding:5px; + border: solid 1px #dfe3e7; + border-radius: .25rem; + margin-top: 3px; + margin-bottom:5px; + margin-right:10px; + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); + } + input#login{ + box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); + margin-right:10px; + + } \ No newline at end of file