Skip to content

Commit

Permalink
Merge pull request #36 from dmols/implementing_questionBank
Browse files Browse the repository at this point in the history 
Added Question Bank Functionality
  • Loading branch information
@clpetersonucf
clpetersonucf authored Apr 22, 2024
2 parents a66d6cb + 692a717 commit d140a1a
Show file tree
Hide file tree
Showing 4 changed files with 200 additions and 12 deletions.
21 changes: 17 additions & 4 deletions src/creator.coffee
View file
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
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
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
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

0 comments on commit d140a1a

Please sign in to comment.