[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-edu-devel
Subject: Re: Review Request 127305: Parley: Re-design multiple choice practice
From: Julian Helfferich <julian.helfferich () googlemail ! com>
Date: 2016-03-25 13:26:37
Message-ID: 20160325132637.21226.43213 () mimi ! kde ! org
[Download RAW message or body]
--===============1514649891661232421==
MIME-Version: 1.0
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 7bit
-----------------------------------------------------------
This is an automatically generated e-mail. To reply, visit:
https://git.reviewboard.kde.org/r/127305/
-----------------------------------------------------------
(Updated March 25, 2016, 2:26 p.m.)
Status
------
This change has been marked as submitted.
Review request for KDE Edu and KDE Usability.
Changes
-------
Submitted with commit 5e27c8c3da7cd95d9bc84649babc9d045c97e109 by Julian Helfferich \
to branch Applications/16.04.
Repository: parley
Description
-------
I have redesigned the Multiple Choice Practice Widget. Instead of QRadioButtons, the \
new design uses QPushButtons and tweaks their appearance using Qt Style Sheets making \
sure that the design works with all themes available on Get Hot New Stuff. The \
results are displayed in the screenshots attached:
New design:
In screenshot 1, entry 2 has keyboard focus while the mouse is hovering over entry 5. \
This uses the Gray theme. In screenshot 2, the wrong entry 3 was selected. \
Additionally, the correct entry 2 is highlighted. Here, the Darkness theme is used. \
In screenshot 3, the correct entry 3 was selected. Here, the Bees theme is used.
Old design:
Screenshots 4-6 correspond to screenshots 1-3, but using the old design for \
comparison.
I think, the new approach has some advantages over the old QRadioButton approach.
* Labels 1-5 indicate that entries can be selected by using this numbers as \
shortcuts.
* Borders around the words instead of underlining the word makes it clearer which \
entry is selected.
* Black text on light red or light green background is more legible than red/green \
text.
I have put much thought into this change and while I think the new approach is an \
improvement, I have also come to appreciate the QRadioButton approach. I am looking \
forward to hear your thoughts.
Diffs
-----
src/practice/multiplechoicemodewidget.h 0d0b43c
src/practice/multiplechoicemodewidget.cpp 74b3279
Diff: https://git.reviewboard.kde.org/r/127305/diff/
Testing
-------
Practiced words:
* Selected correct entry
* Selceted wrong entry
* Pressed "Continue"
* Pressed "Answer later"
I tested the new design with all backgrounds available with Get Hot New Stuff.
File Attachments
----------------
New design: Entry selected, theme Gray
https://git.reviewboard.kde.org/media/uploaded/files/2016/03/07/1209538e-5838-42cf-9a07-4b1df976f4ee__snapshot1.png
New design: Wrong answer, theme Darkness
https://git.reviewboard.kde.org/media/uploaded/files/2016/03/07/63818cda-70a3-4592-865a-6ff59ddef7a8__snapshot2.png
New design: Correct answer, theme Bee
https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/dbfc2cae-e3bc-4ab8-91c1-b628eca8c6c5__snapshot3.png
Old design: Entry selected, theme Gray
https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/aa431bf6-7e6f-494d-84c8-e6b610222bca__snapshot4.png
Old design: Wrong answer, theme Darkness
https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/32eeb97b-5730-4fd4-bdd5-1b96168398ae__snapshot5.png
Old design: Correct answer, theme Bees
https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/eee260f4-4c7d-42d6-a4bf-a62dcc0707b7__snapshot6.png
Thanks,
Julian Helfferich
--===============1514649891661232421==
MIME-Version: 1.0
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 7bit
<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 \
solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;"> \
<tr> <td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/127305/">https://git.reviewboard.kde.org/r/127305/</a>
</td>
</tr>
</table>
<br />
<table bgcolor="#e0e0e0" width="100%" cellpadding="12" style="border: 1px gray solid; \
border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;"> <tr>
<td>
<h1 style="margin: 0; padding: 0; font-size: 10pt;">This change has been marked as \
submitted.</h1> </td>
</tr>
</table>
<br />
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: \
1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; \
-webkit-border-radius: 6px;"> <tr>
<td>
<div>Review request for KDE Edu and KDE Usability.</div>
<div>By Julian Helfferich.</div>
<p style="color: grey;"><i>Updated March 25, 2016, 2:26 p.m.</i></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Changes</h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: \
1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;">Submitted with commit 5e27c8c3da7cd95d9bc84649babc9d045c97e109 by Julian \
Helfferich to branch Applications/16.04.</pre> </td>
</tr>
</table>
<div style="margin-top: 1.5em;">
<b style="color: #575012; font-size: 10pt;">Repository: </b>
parley
</div>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" \
style="border: 1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">I have redesigned the Multiple Choice Practice Widget. \
Instead of QRadioButtons, the new design uses QPushButtons and tweaks their \
appearance using Qt Style Sheets making sure that the design works with all themes \
available on Get Hot New Stuff. The results are displayed in the screenshots \
attached:</p> <p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">New design: In screenshot 1, entry 2 has keyboard \
focus while the mouse is hovering over entry 5. This uses the Gray theme. In \
screenshot 2, the wrong entry 3 was selected. Additionally, the correct entry 2 is \
highlighted. Here, the Darkness theme is used. In screenshot 3, the correct entry 3 \
was selected. Here, the Bees theme is used.</p> <p style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: inherit;">Old design: Screenshots \
4-6 correspond to screenshots 1-3, but using the old design for comparison.</p> <p \
style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
inherit;">I think, the new approach has some advantages over the old QRadioButton \
approach.</p> <ul style="padding: 0;text-rendering: inherit;margin: 0 0 0 \
1em;line-height: inherit;white-space: normal;"> <li style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">Labels 1-5 indicate that \
entries can be selected by using this numbers as shortcuts.</li> <li style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">Borders around the words instead of underlining the word makes it clearer \
which entry is selected.</li> <li style="padding: 0;text-rendering: inherit;margin: \
0;line-height: inherit;white-space: normal;">Black text on light red or light green \
background is more legible than red/green text.</li> </ul>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">I have put much thought into this change and while I \
think the new approach is an improvement, I have also come to appreciate the \
QRadioButton approach. I am looking forward to hear your thoughts.</p></pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Testing </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: \
1px solid #b8b5a0"> <tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: \
-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: \
break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">Practiced words:</p> <ul style="padding: \
0;text-rendering: inherit;margin: 0 0 0 1em;line-height: inherit;white-space: \
normal;"> <li style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">Selected correct entry</li> <li style="padding: \
0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: \
normal;">Selceted wrong entry</li> <li style="padding: 0;text-rendering: \
inherit;margin: 0;line-height: inherit;white-space: normal;">Pressed "Continue"</li> \
<li style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: normal;">Pressed "Answer later"</li> </ul>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: \
inherit;white-space: inherit;">I tested the new design with all backgrounds available \
with Get Hot New Stuff.</p></pre> </td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
<li>src/practice/multiplechoicemodewidget.h <span style="color: \
grey">(0d0b43c)</span></li>
<li>src/practice/multiplechoicemodewidget.cpp <span style="color: \
grey">(74b3279)</span></li>
</ul>
<p><a href="https://git.reviewboard.kde.org/r/127305/diff/" style="margin-left: \
3em;">View Diff</a></p>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">File Attachments \
</h1>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/07/1209538e-5838-42cf-9a07-4b1df976f4ee__snapshot1.png">New \
design: Entry selected, theme Gray</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/07/63818cda-70a3-4592-865a-6ff59ddef7a8__snapshot2.png">New \
design: Wrong answer, theme Darkness</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/dbfc2cae-e3bc-4ab8-91c1-b628eca8c6c5__snapshot3.png">New \
design: Correct answer, theme Bee</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/aa431bf6-7e6f-494d-84c8-e6b610222bca__snapshot4.png">Old \
design: Entry selected, theme Gray</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/32eeb97b-5730-4fd4-bdd5-1b96168398ae__snapshot5.png">Old \
design: Wrong answer, theme Darkness</a></li>
<li><a href="https://git.reviewboard.kde.org/media/uploaded/files/2016/03/14/eee260f4-4c7d-42d6-a4bf-a62dcc0707b7__snapshot6.png">Old \
design: Correct answer, theme Bees</a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
--===============1514649891661232421==--
[Attachment #3 (text/plain)]
_______________________________________________
kde-edu mailing list
kde-edu@mail.kde.org
https://mail.kde.org/mailman/listinfo/kde-edu
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic