Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Question Bank Functionality #36

Merged
merged 11 commits into from
Apr 22, 2024
Merged

Added Question Bank Functionality #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5614186
Added question bank functionality to creator and player side
dmols Dec 12, 2023
a58620a
Polished the functionality and added styling
dmols Dec 12, 2023
a0166e7
Replaced question dialog function calls with ng-click attributes
dmols Dec 14, 2023
4cef684
WIP: making enableQuestionBank initially false
dmols Dec 14, 2023
3c98421
Fixed questionBankVal initial value and added input safeguards
dmols Dec 14, 2023
d28bfc9
Removed break statements and added visual padding in the dialog
dmols Dec 15, 2023
088a39d
Added lots of css changes to dialog and changed functionality
dmols Feb 13, 2024
ff0c079
visual improvements for the dialog and semantic html changes
dmols Feb 13, 2024
1d8e362
Minor css changes
dmols Feb 13, 2024
4bf05a0
Added tooltip for QB functionality and tweaked some css
dmols Feb 27, 2024
692a717
Merge branch 'dev/1.3.0' into implementing_questionBank
clpetersonucf Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions src/creator.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Hangman.directive('focusMe', ['$timeout', '$parse', ($timeout, $parse) ->
])

Hangman.factory 'Resource', ['$sanitize', ($sanitize) ->
buildQset: (title, items, partial, attempts, random) ->
buildQset: (title, items, partial, attempts, random, enableQuestionBank, questionBankVal) ->
qsetItems = []
qset = {}

Expand All @@ -47,7 +47,7 @@ Hangman.factory 'Resource', ['$sanitize', ($sanitize) ->
Materia.CreatorCore.cancelSave 'Word #'+(i+1)+' needs to contain at least one letter or number.'
return false

qset.options = {partial: partial, attempts: attempts, random: random}
qset.options = {partial: partial, attempts: attempts, random: random, enableQuestionBank: enableQuestionBank, questionBankVal: questionBankVal}
qset.assets = []
qset.rand = false
qset.name = title
Expand Down Expand Up @@ -97,6 +97,10 @@ Hangman.controller 'HangmanCreatorCtrl', ['$timeout', '$scope', '$sanitize', 'Re
$scope.partial = false
$scope.random = false
$scope.attempts = 5
$scope.questionBankModal = false
$scope.enableQuestionBank = false
$scope.questionBankVal = 1
$scope.questionBankValTemp = 1

# for use with paginating results
$scope.currentPage = 0;
Expand Down Expand Up @@ -191,7 +195,12 @@ Hangman.controller 'HangmanCreatorCtrl', ['$timeout', '$scope', '$sanitize', 'Re
$scope.hideCover()

$scope.hideCover = ->
$scope.showTitleDialog = $scope.showIntroDialog = false
$scope.showTitleDialog = $scope.showIntroDialog = $scope.questionBankModal = false
$scope.questionBankValTemp = $scope.questionBankVal

$scope.validateQuestionBankVal = ->
if ($scope.questionBankValTemp >= 1 && $scope.questionBankValTemp <= $scope.items.length)
$scope.questionBankVal = $scope.questionBankValTemp

$scope.initNewWidget = (widget, baseUrl) ->
$scope.$apply ->
Expand All @@ -202,12 +211,16 @@ Hangman.controller 'HangmanCreatorCtrl', ['$timeout', '$scope', '$sanitize', 'Re
$scope.attempts = ~~qset.options.attempts or 5
$scope.partial = qset.options.partial
$scope.random = qset.options.random
$scope.enableQuestionBank = if qset.options.enableQuestionBank then qset.options.enableQuestionBank else false
$scope.questionBankVal = if qset.options.questionBankVal then qset.options.questionBankVal else 1
$scope.questionBankValTemp = if qset.options.questionBankVal then qset.options.questionBankVal else 1

$scope.onQuestionImportComplete qset.items[0].items

$scope.$apply()

$scope.onSaveClicked = (mode = 'save') ->
qset = Resource.buildQset $sanitize($scope.title), $scope.items, $scope.partial, $scope.attempts, $scope.random
qset = Resource.buildQset $sanitize($scope.title), $scope.items, $scope.partial, $scope.attempts, $scope.random, $scope.enableQuestionBank, $scope.questionBankVal
if qset then Materia.CreatorCore.save $sanitize($scope.title), qset

$scope.onSaveComplete = (title, widget, qset, version) -> true
Expand Down
46 changes: 42 additions & 4 deletions src/creator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,12 @@
<div class="logo"></div>
<h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
<div ng-click="showTitleDialog = true" class="link">Edit...</div>
<button
ng-class= "{'qb-button': true, 'gray-out': !enableQuestionBank}"
ng-click="questionBankModal = !questionBankModal"
ng-disabled="items.length === 0">
Question Bank: {{enableQuestionBank === true ? "ON" : "OFF"}}
</button>
<span class="attempts">
<p>Incorrect guesses per phrase</p>
<div class="slide-btn">
Expand All @@ -51,8 +57,16 @@ <h1 id="title" ng-bind="title" ng-click="showTitleDialog = true"></h1>
</span>
<div class="random partial">
<p>Randomize Order</p>
<input type="checkbox" id="randomize" ng-model="random">
<label for="randomize" class="checktoggle"></label>
<input type="checkbox" ng-checked=enableQuestionBank ng-disabled=enableQuestionBank id="randomize" ng-model="random">
<label for="randomize" ng-class="{'disabled-look': enableQuestionBank}" class="checktoggle"></label>
</div>
<div class="question-tip randomizer-tip">?
<div class="qtip-box">
<p>
If <b>Question Bank</b> is on then the check to randomize order is disabled. This is because the question bank
randomizes the question order already.
</p>
</div>
</div>
<div class="partial">
<p>Partial scoring</p>
Expand Down Expand Up @@ -168,11 +182,10 @@ <h3>Phrase</h3>
<span>{{currentPage+1}}/{{numberOfPages()}}</span>
<button ng-disabled="currentPage >= numberOfPages() - 1" ng-click="currentPage=currentPage+1">Next</button>
</div>

<div ng-show="!items.length &amp;&amp; step" class="arrow-box">
<span>Click here to add your first question</span>
</div>
<div id="backgroundcover" ng-click="hideCover()" ng-class="{ show: showTitleDialog || showIntroDialog }"></div>
<div id="backgroundcover" ng-click="hideCover()" ng-class="{ show: showTitleDialog || showIntroDialog || questionBankModal }"></div>
<div ng-class="{ show: showIntroDialog }" class="box intro">
<img src="assets/creator_example.png">
<h1>Guess the Phrase</h1>
Expand All @@ -188,5 +201,30 @@ <h1>Guess the Phrase</h1>
<input type="text" placeholder="My Guess the Phrase widget" ng-model="title" focus-me="showTitleDialog" ng-enter="hideCover()">
<input type="button" value="Done" ng-click="hideCover()">
</div>
<div ng-class="{ show: questionBankModal }" ng-click= 'hideCover()' class="box question-bank-dialog">
<div class="enable-qb-question">
<label style="font-weight: bold;">Enable question bank? </label>
<div class="enable-qb-options" ng-click="$event.stopPropagation()">
<span>
<input type="radio" ng-model="enableQuestionBank" ng-value=false> No</input>
<input type="radio" ng-model="enableQuestionBank" ng-change="questionBankValTemp = questionBankVal = items.length" ng-value=true> Yes</input>
</span>
</div>
</div>
<div>
<span ng-show="enableQuestionBank" >
<label style="font-weight: bold;">How many questions to ask? </label>
<div class="num-input-wrapper" ng-click="$event.stopPropagation()">
<input class="num-input" type="number" ng-model="questionBankValTemp" ng-change="validateQuestionBankVal()" step="1">
<span> out of {{items.length}} </span>
</div>
</span>
</div>
<p class="qb-warning">If question bank is enabled, questions will be randomized. </p>
<button class="dialog-close-button"
ng-click="questionBankModal = false"
ng-disabled="questionBankValTemp < 1 || questionBankValTemp > items.length">Confirm</button>
</div>

</body>
</html>
133 changes: 131 additions & 2 deletions src/creator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,6 +483,85 @@ button.add-question {
}
}

.question-bank-dialog {

position: fixed;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
background-color: #ffffff;
padding: 0;
height: 200px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

input {
margin-top: 0;
padding: 0;
width: unset;
background: #ffffff;
font-size: 17px;
text-align: center;
border: none;
vertical-align: unset;
font-family: 'Lato';
}
.num-input-wrapper {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
margin-bottom: 5px;

.num-input {
color: black;
outline: 1px solid black;
width: 35px;
margin: 2px 5px 0 0;
}
}

.enable-qb-question {
margin-top: 15px;
margin-bottom: 10px;

.enable-qb-options {
display: flex;
justify-content: center;
}
}
.qb-warning {
font-size: 14px;
margin: 0;
text-align: center;
}

.dialog-close-button {
position: relative;
margin: 15 0 10 0;
font-size: 15px;
width: 100px;
background-color: #70bd34;
color: black;

&:hover {
background-color: #88df45;
border: 1px solid #88df45;
color: black;
cursor: pointer;
}

&:disabled {
background-color: #cccccc;
color: #ffffff;
}
}
}

.arrow-box {
position: absolute;
background: #fbf767;
Expand Down Expand Up @@ -619,9 +698,45 @@ button.add-question {
top: 28px;
background: #fff;
}

.qb-button {
position: absolute;
background-color: $green;
color: #fff;
width: unset;
right: 590px;
top: 35px;

&:hover {
background-color: #7AD038;
cursor: pointer;
}

&:disabled {
background-color: #ccc;
border: 1px solid #ccc;
color: #fff;
cursor: not-allowed;
}

&.gray-out:not(:disabled) {
background-color: #5a5a5a;
border: 1px solid #5a5a5a;
color: #fff;

&:hover {
background-color: #938f8f;
border: 1px solid #938f8f;
cursor: pointer;
}

}

}

.attempts {
position: absolute;
right: 355px;
right: 395px;
cursor: pointer;
top:0px;

Expand Down Expand Up @@ -764,10 +879,17 @@ button.add-question {
.random {
position: absolute;
top: 0px;
right: 185px;
right: 225px;
font-family: "Lato";

label.checktoggle {
left: 24px;

&.disabled-look {
background-color: #676363;
opacity: 0.5;
cursor: not-allowed;
}
}
}
}
Expand All @@ -788,6 +910,9 @@ button.add-question {

transition: all 0.15s ease;

&.randomizer-tip {
right: 190px;
}
&:hover {
opacity: 1;
background: #53a1d1;
Expand Down Expand Up @@ -851,6 +976,10 @@ button.add-question {
}
}

&.randomize-tooltip {
right: 180px;
}

}

.answer {
Expand Down
12 changes: 10 additions & 2 deletions src/player.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,9 @@ HangmanEngine.controller 'HangmanEngineCtrl', ['$scope', '$timeout', 'Parse', 'R
Hangman.Draw.playAnimation 'torso', 'pander'
$scope.anvilStage = 1

$scope.prepareQuestionBank = (qsetArr, questionBankVal) ->
return _shuffle(qsetArr.items).slice(0, questionBankVal)

$scope.startQuestion = ->

$scope.$apply ->
Expand Down Expand Up @@ -323,10 +326,10 @@ HangmanEngine.controller 'HangmanEngineCtrl', ['$scope', '$timeout', 'Parse', 'R
$scope.max = Reset.attempts ~~_qset.options.attempts
$scope.keyboard = Reset.keyboard()
), 500


_shuffle = (a) ->
for i in [1...a.length]
for i in [0...a.length]
j = Math.floor Math.random() * (a.length)
[a[i], a[j]] = [a[j], a[i]]
a
Expand All @@ -344,6 +347,11 @@ HangmanEngine.controller 'HangmanEngineCtrl', ['$scope', '$timeout', 'Parse', 'R
if _qset.options.random
_qset.items[0].items = _shuffle _qset.items[0].items

if(_qset.options.random and _qset.options.enableQuestionBank)
_qset.items[0].items = _qset.items[0].items.slice(0, _qset.options.questionBankVal)
else if(qset.options.enableQuestionBank)
_qset.items[0].items = window.scope.prepareQuestionBank(qset.items[0], qset.options.questionBankVal)

$scope.total = _qset.items[0].items.length
$scope.max = Reset.attempts ~~_qset.options.attempts
$scope.keyboard = Reset.keyboard()
Expand Down
Loading