Commit 7b390379 authored by Bruno Burke's avatar Bruno Burke 😁

fix bulma-css layout for calculation exercise

parent 55c756ce
Pipeline #44997 passed with stages
in 1 minute and 43 seconds
......@@ -16,8 +16,8 @@
[:input {:color "inherit"}]
;; [:.shifttotop {:margin-top "-1rem"}]
[:.expo-input-container {:display "grid"
:grid-template-rows "auto 5.0rem auto"
:grid-template-columns "6.0rem 1.0rem 3.0rem 4.0rem 1fr"
;;;:grid-template-rows "auto 5.0rem auto"
:grid-template-columns "6.0rem 2.0rem 3.0rem 4.0rem 1fr"
:grid-column-gap "0.3em"}
[:.mantisse {:grid-column "1 / 2"
:grid-row "2 / 4"}]
......@@ -28,6 +28,21 @@
[:.exponent {:align-self "end"
:grid-column "4 / 5"
:grid-row "1 / 3"}]]
[:.unit-input-container {:display "grid"
;;;:grid-template-rows "auto 5.0rem auto"
:grid-template-columns "8.0rem 4.0rem 4.0rem 4.0rem"
:grid-column-gap "0.3em"
:justify-content :center}
[:.prefix {:grid-column "1 / 2"
:grid-row "2 / 4"}]
[:.unit {:grid-column "2 / 3"
:grid-row "2 / 4"}]
[:.exponent {:align-self "end"
:grid-column "3 / 4"
:grid-row "1 / 3"}]
[:.action {:align-self "end"
:grid-column "4 / 5"
:grid-row "1 / 3"}]]
[:.no-border {:border-bottom "none !important"}]
[:div.col.unit-chip {:border "1px solid grey"
:border-radius "2px"}
......
......@@ -4,6 +4,7 @@
:refer [prefix-mapping prefix-set unit-set not-empty-or-minus]]
[reagent.core :as reagent]
[reagent.dom :as rdom]
[lernmeister.components.ui :as ui]
[lernmeister.components.helper :refer [vec-remove]]))
(defn parse-unit [string]
......@@ -137,7 +138,16 @@
(defn input-text-inline [answer & {:keys [value width label class disabled on-change]}]
(fn [answer & {:keys [value width label class disabled on-change]}]
[:div.input-field.inline
[ui/input-text
{:type "text"
:label label
:class class
:value value
:size width
:disabled disabled
:on-change #(on-change answer %)}
]
#_[:div.input-field.inline
[:input {:type "text"
:class class
:value value
......
......@@ -18,11 +18,11 @@
calculation
id-prefix
& {:keys [result answer on-change-fn do-render]}]
(let [unit-modal-id (str "calc-unit-modal-" (gensym id-prefix))
value-modal-id (str "calc-value-modal-" (gensym id-prefix))]
(reagent/create-class
{:reagent-render
(fn [exercise calculation id-prefix & {:keys [result answer on-change-fn do-render]}]
(reagent/create-class
{:reagent-render
(fn [exercise calculation id-prefix & {:keys [result answer on-change-fn do-render]}]
(reagent/with-let [unit-modal-state (reagent/atom false)
value-modal-state (reagent/atom false)]
(let [id (:id calculation)
name (:name calculation)
number (get-in answer [id :number])
......@@ -33,8 +33,16 @@
:with-units (:with-units exercise)}
(get answer id)))]
[:<>
[:div.row
[:div.col.s12.m6
[:div.columns
(when-let [correct-calculations (and result
(:correct-calculations result))]
{:class
(cond
(correct-calculations id)
"has-background-success"
:else
"has-background-danger")})
[:div.column.is-half
(if do-render
[:div.col [latex-span name] " = " [latex-span latex-str]]
[:div.col name " = " latex-str])
......@@ -42,46 +50,48 @@
(if (contains? (:correct-calculations result) id)
[common/correct-tick]
[common/wrong-tick]))]
[:div.col.s6.m3
[:a.button {:disabled result
:on-click #(ui/open-modal (str "#" value-modal-id))}
[:span.icon [:i.fas.fa-edit]]
[:span "Wert"]]]
(when with-units
[:div.col.s6.m3
[:a.button {:disabled result
:on-click #(ui/open-modal (str "#" unit-modal-id))}
[:span.icon [:i.fas.fa-edit]]
[:span "Einheit"]]])]
(when-not result
[:div.column.is-half
[:div.columns.is-mobile
[:div.column.is-half
[:a.button {:disabled result
:on-click #(swap! value-modal-state not)}
[:span.icon [:i.fas.fa-edit]]
[:span "Wert"]]]
(when with-units
[:div.column.is-half
[:a.button {;;:disabled result
:on-click #(swap! unit-modal-state not)}
[:span.icon [:i.fas.fa-edit]]
[:span "Einheit"]]])
]
])
]
(when-not result
[:<>
[:div.modal.modal-fixed-footer {:id value-modal-id}
[:div.modal-content
[:h5 "Ergebnis-Editor (" \" name "\")"]
[:div.section
[calculation-value-input exercise id :answer answer :on-change-fn on-change-fn]]]
[:div.modal-footer
[:div.col.s12
[:a.btn.white.black-text
{:on-click (fn []
(ui/close-modal (str "#" value-modal-id)))} "Schließen"]]]]
[:div.modal.modal-fixed-footer {:id unit-modal-id}
[:div.modal-content
[:h5 "Einheiten-Editor (" \" name "\")"]
[:div.section
[calculation-unit-input exercise id :answer answer :on-change-fn on-change-fn]]]
[:div.modal-footer
[:div.col.s12
[:a.btn.white.black-text
{:on-click (fn []
(ui/close-modal (str "#" unit-modal-id)))} "Schließen"]]]]
])]))
:component-did-update
(fn [] (do (ui/init-modal (str "#" unit-modal-id))
(ui/init-modal (str "#" value-modal-id))))
:component-did-mount
(fn [] (do (ui/init-modal (str "#" unit-modal-id))
(ui/init-modal (str "#" value-modal-id))))})))
[ui/modal-panel
{:state value-modal-state
:title (str "Ergebniswert eingeben - (" name ")")
:footer [:<>
[:a.button
{:on-click (fn []
(swap! value-modal-state not))} "Schließen"]]}
[:div.content
[calculation-value-input exercise id
:answer answer
:on-change-fn on-change-fn]]]
[ui/modal-panel
{:state unit-modal-state
:title (str "Ergebniseinheit eingeben - (" name ")")
:footer [:<>
[:a.button
{:on-click (fn []
(swap! unit-modal-state not))} "Schließen"]]}
[:div.content
[calculation-unit-input exercise id
:answer answer
:on-change-fn on-change-fn]]]
])])))}))
(defn calculations [exercise & {:keys [result answer on-change-fn]}]
(reagent/create-class
......@@ -92,11 +102,12 @@
[:div ;; intended to be "[:<>"
(doall (for [calculation calculations]
^{:key (:id calculation)}
[calculation-renderer exercise calculation "show"
:result result
:answer answer
:on-change-fn on-change-fn
:do-render true]))]
[:div.my-4
[calculation-renderer exercise calculation "show"
:result result
:answer answer
:on-change-fn on-change-fn
:do-render true]]))]
[:span "No calculations available"])))}))
(defn print-calculation-exercise [exercise & {:keys [result answer on-change-fn]}]
......@@ -112,8 +123,11 @@
[:div.card-content
[:span.card-title [:b (:title exercise)]]
[default-task-description (:task-description exercise)]
[:h6 [:b "Antwort:"]]
[calculations exercise :result result :answer answer :on-change-fn on-change-fn]
[:p [:b "Antwort:"]]
[calculations exercise
:result result
:answer answer
:on-change-fn on-change-fn]
(when result
[:span.secondary-content [:b (str (:points result) "P")]])]]))
......
......@@ -46,10 +46,10 @@
(defn unit-chip [& {:keys [:prefix :unit :expo :answer :on-change]}]
(fn [& {:keys [:prefix :unit :expo :answer :on-change-fn]}]
[:div.col.unit-chip
[:div.tag
(str prefix unit)
(when-not (= "1" expo) [:sup expo])
[:i.material-icons.red-text {:on-click #(on-change answer)} "close"]]))
[:button.delete {:on-click #(on-change answer)}]]))
(defn units-builder [id & {:keys [answer on-change-fn]}]
(let [cur-unit (reagent/atom {:prefix nil :unit nil :expo nil})
......@@ -59,18 +59,17 @@
(fn [id & {:keys [answer on-change-fn]}]
(let [units (get-in answer [id :units])]
[:div ;; intended to be "[:<>"
[:div.row
[:div.col.s12
[:div.section
[:div.columns.is-multiline
[:div.column.is-full
[:div
[:b "Einheit: "]
(if (pos? (count units))
[latex-span (build-units-latex-string units)]
[:p "Bitte definieren Sie mindestens einen Einheitenbestandteil"])]]
[:div.col.s12
[:div.section
[:div.column.is-full
[:div
[:b "Bestandtteile:"]
[:div.row
(when-not (empty? units)
(map-indexed
(fn [index unit-entry]
(let [prefix (:prefix unit-entry)
......@@ -83,25 +82,26 @@
:expo expo
:answer answer
:on-change (fn [answer]
(on-change-fn (update-in answer [id :units] #(vec-remove % index))))])) units))
(on-change-fn (update-in answer [id :units] #(vec-remove % index))))])) units)
#_(when-not @add-unit?
[:div.col.s12. [:a.btn.btn-small {:on-click #(reset! add-unit? true)} "+ Einheit"]])
(when (:invalid @cur-unit)
[:div.col.s12
[ui/icon "warning" :class "orange-text"]
[:span " Ungültige Einheit"]])]
[:div
[:div.row
[:div.col.s4.expo-padding
]
(when (:invalid @cur-unit)
[:div.notification.is-warning
[:div
[:span.icon [:i.fas.fa-exclamation-triangle]]
[:span " Ungültige Einheit"]]])
[:div.my-4.unit-input-container
[:div.prefix
[ui/select
:label "Präfix"
:value (:prefix @cur-unit)
:options (map (fn [[p e]]
(hash-map :key (str p) :title (str p " = 10^" e))) prefixes)
:on-change (fn [value]
(when-let [v (parse-prefix (name value))]
(swap! cur-unit assoc :prefix v)))]]
[:div.col.s4.expo-padding
{:label "Präfix"
:value (:prefix @cur-unit)
:options (map (fn [[p e]]
(hash-map :key (str p) :title (str p " = 10^" e))) prefixes)
:on-change (fn [value]
(when-let [v (parse-prefix (name value))]
(swap! cur-unit assoc :prefix v)))}]]
[:div.unit
#_[ui/select
:label "Einheit"
:value (:unit @cur-unit)
......@@ -111,15 +111,15 @@
(when-let [v (parse-unit (name value))]
(swap! cur-unit assoc :unit v)))]
[ui/input-text
:value (:unit @cur-unit)
:label "Einheit"
:input-size 4
:input-class "center-align"
:autocomplete {:options (into {} (map #(vector % nil) unit-options))}
:on-change (fn [value]
(when-let [v (parse-unit value)]
(swap! cur-unit assoc :unit v)))]]
[:div.col.s2
{:value (:unit @cur-unit)
:label "Einheit"
:input-size 4
:input-class "center-align"
:autocomplete {:options (into {} (map #(vector % nil) unit-options))}
:on-change (fn [value]
(when-let [v (parse-unit value)]
(swap! cur-unit assoc :unit v)))}]]
[:div.exponent
[input-text-inline nil
:value (:expo @cur-unit)
:label "Exponent"
......@@ -128,8 +128,8 @@
:on-change (fn [_ value]
(when-let [v (parse-int value)]
(swap! cur-unit assoc :expo v)))]]
[:div.col.s2.expo-padding
[:button.btn.blue
[:div.action
[:button.button.is-small
{:on-click (fn []
(if-let [checked-unit (check-unit @cur-unit)]
(let [prefix (:prefix checked-unit)
......@@ -146,18 +146,21 @@
(select-keys @cur-unit [:prefix :unit :expo]))
(swap! cur-unit assoc :invalid :unit)
(swap! cur-unit dissoc :invalid))))}
"+"]]]
[:div.row
[:div.col.s12
[:i.material-icons.left "help_outline"]
"Bei zusammengesetzten Einheiten bitte jeden Bestandtteil einzeln eingeben und mit + bestätigen."]
[:div.col.s12
[:i.material-icons.left "help_outline"]
"km² = Präfix k, Einheit m, Exponent 2"]
[:div.col.s12
[:i.material-icons.left "help_outline"]
[:span.icon [:i.fas.fa-plus]]]]]]]
[:div.column.is-full
[:div.columns.is-multiline
[:div.column.is-full
[:span.icon [:i.far.fa-question-circle]]
[:span
"Brüche können mit negativem Exponent beschrieben werden." [:br]]]]]]]]]))))
"Bei zusammengesetzten Einheiten bitte jeden Bestandtteil einzeln eingeben und mit + bestätigen."]]
[:div.column.is-full
[:span.icon [:i.far.fa-question-circle]]
[:span
"km² = Präfix k, Einheit m, Exponent 2"]]
[:div.column.is-full
[:span.icon [:i.far.fa-question-circle]]
[:span
"Brüche können mit negativem Exponent beschrieben werden." [:br]]]]]]]))))
(defn calculation-unit-input [exercise id & {:keys [answer on-change-fn]}]
(fn [exercise id & {:keys [answer on-change-fn]}]
......
......@@ -22,21 +22,18 @@
:with-units (:with-units exercise)}
(get answer id)))]
[:div ;; intended to be "[:<>"
[:div.row
[:div.col.s12
[:div.column.is-multiline
[:div.column.is-12
(if (not-empty latex-str)
[:p "Ihre Eingabe: " [latex-span latex-str]]
[:p [:em "Es fehlen weitere Angaben."] [:br] [:br]]
)]
[:div.col.s12
[:br] [:br]
]
[:div.col.s12.m6
[:div.row
[:div.col.font-plus [:b "Wert: "]]]
[:div.column.is-full
[:div.columns
[:div.column.font-plus [:b "Wert: "]]]
(if with-oom
[:div.row
[:div.col.s12
[:div.columns.is-multiline
[:div.column.is-full
[:div.expo-input-container
[:div.mantisse
[input-text-inline answer
......@@ -44,11 +41,13 @@
:label "Mantisse"
:class "center-align"
:on-change (fn [answer value]
(js/console.log value)
(when-let [v (parse-float value)]
(on-change-fn (assoc-in answer [id :number] v))))]]
[:div.dot.center-align
[input-text-inline answer
:value "\u22c5"
:value "⋅"
:label " "
:class "center-align no-border"
:disabled true
:on-change #(identity nil)]]
......@@ -61,18 +60,22 @@
:on-change #(identity nil)]]
[:div.exponent
[ui/input-text
:value oom
:label "Exponent"
:tooltip {:position "bottom"
:label "Eingabe ohne Exponentialdarstellung durch Exponent 0"}
:input-class "center-align"
:on-change (fn [value]
(when-let [v (parse-int value)]
(on-change-fn (assoc-in answer [id :order-of-magnitude] v))))]]]]
[:div.col.s12 [:i.material-icons.left "help_outline"] "Eingabe erfolgt in wissenschaftlicher Notation."]
[:div.col.s12 [:i.material-icons.left "help_outline"] "Beispiel: 5000 entspricht 5 als Mantisse, 10 als Basis und 3 als Exponent."]]
[:div.row
[:div.col
{:value oom
:label "Exponent"
:tooltip {:position "bottom"
:label "Eingabe ohne Exponentialdarstellung durch Exponent 0"}
:input-class "center-align"
:on-change (fn [value]
(when-let [v (parse-int value)]
(on-change-fn (assoc-in answer [id :order-of-magnitude] v))))}]]]]
[:div.column.is-full
[:span.icon [:i.far.fa-question-circle]]
"Eingabe erfolgt in wissenschaftlicher Notation."]
[:div.column.is-full
[:span.icon [:i.far.fa-question-circle]]
"Beispiel: 5000 entspricht 5 als Mantisse, 10 als Basis und 3 als Exponent."]]
[:div.columns
[:div.column
[input-text-inline answer
:value number
:label "Zahlenwert"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment