Skip to content

Commit

Permalink
Fix oppia#4350, oppia#4217, oppia#4361: Enable progress-nav on deskto…
Browse files Browse the repository at this point in the history 
…p (and some other interaction fixes) (oppia#4365)

* Enable progress-nav on desktop. Also use isViewportNarrow for everything.

* isViewportNarrow -> canWindowShowTwoCards

* Fix frontend tests

* Remove extra space between card and audio bar

* Fix Karma and Protractor tests; fix solution editor.

* Fully fix everything on desktop, mobile and embed views. Enforce that demo exploration covers all interactions. Remove unnecessary code.

* Fix e2e tests.
  • Loading branch information
@seanlip
seanlip authored Jan 6, 2018
1 parent f634c2e commit d6aabd5
Show file tree
Hide file tree
Showing 65 changed files with 600 additions and 701 deletions.
21 changes: 20 additions & 1 deletion core/templates/dev/head/pages/exploration_editor/editor_tab/StateSolution.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,10 @@ oppia.controller('StateSolution', [
backdrop: 'static',
controller: [
'$scope', '$uibModalInstance', 'stateSolutionService',
function($scope, $uibModalInstance, stateSolutionService) {
'EVENT_PROGRESS_NAV_SUBMITTED', 'INTERACTION_SPECS',
function(
$scope, $uibModalInstance, stateSolutionService,
EVENT_PROGRESS_NAV_SUBMITTED, INTERACTION_SPECS) {
$scope.stateSolutionService = stateSolutionService;
$scope.correctAnswerEditorHtml = (
ExplorationHtmlFormatterService.getInteractionHtml(
Expand All @@ -103,6 +106,8 @@ oppia.controller('StateSolution', [
ui_config: {}
};

$scope.answerIsValid = false;

var EMPTY_SOLUTION_DATA = {
answerIsExclusive: false,
correctAnswer: null,
Expand All @@ -117,10 +122,24 @@ oppia.controller('StateSolution', [
stateSolutionService.savedMemento.explanation.getHtml())
} : angular.copy(EMPTY_SOLUTION_DATA);

$scope.onSubmitFromSubmitButton = function() {
$scope.$broadcast(EVENT_PROGRESS_NAV_SUBMITTED);
};

$scope.submitAnswer = function(answer) {
$scope.data.correctAnswer = answer;
};

$scope.setInteractionAnswerValidity = function(answerValidity) {
$scope.answerIsValid = answerValidity;
};

$scope.shouldAdditionalSubmitButtonBeShown = function() {
var interactionSpecs = INTERACTION_SPECS[
stateInteractionIdService.savedMemento];
return interactionSpecs.show_generic_submit_button;
};

$scope.saveSolution = function() {
if (typeof $scope.data.answerIsExclusive === 'boolean' &&
$scope.data.correctAnswer !== null &&
Expand Down
9 changes: 8 additions & 1 deletion .../dev/head/pages/exploration_editor/editor_tab/add_or_update_solution_modal_directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ <h3><[stateSolutionService.savedMemento !== null ? 'Update Solution' : 'Add Solu
angular-html-bind="correctAnswerEditorHtml">
</div>
<br>
<md-button class="oppia-learner-confirm-button protractor-test-submit-answer-button"
ng-click="onSubmitFromSubmitButton()"
ng-if="data.correctAnswer === null && shouldAdditionalSubmitButtonBeShown()"
ng-disabled="!answerIsValid">
Submit
</md-button>
<br>
<div ng-show="data.correctAnswer !== null">
<strong>Explanation:</strong>
<schema-based-editor class="protractor-test-explanation-textarea"
Expand All @@ -31,7 +38,7 @@ <h3><[stateSolutionService.savedMemento !== null ? 'Update Solution' : 'Add Solu
<button class="btn btn-default" ng-click="cancel()">Cancel</button>
<button class="btn btn-success protractor-test-submit-solution-button"
ng-click="saveSolution()"
ng-disabled="data.correctAnswer === null || !data.explanationHtml">
ng-disabled="data.correctAnswer === null || !data.explanationHtml || !answerIsValid">
Check and Save Solution
</button>
</div>
1 change: 0 additions & 1 deletion core/templates/dev/head/pages/exploration_editor/exploration_editor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,6 @@
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/PlayerPositionService.js"></script>
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/PlayerServices.js"></script>
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/PlayerTranscriptService.js"></script>
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/ProgressDotsDirective.js"></script>
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/ProgressNavDirective.js"></script>
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/StatsReportingService.js"></script>
<script src="{{TEMPLATE_DIR_PREFIX}}/pages/exploration_player/FatigueDetectionService.js"></script>
Expand Down
70 changes: 30 additions & 40 deletions core/templates/dev/head/pages/exploration_player/ConversationSkinDirective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,13 +253,13 @@ oppia.directive('conversationSkin', [
'LearnerParamsService', 'PlayerPositionService',
'ExplorationRecommendationsService', 'StatsReportingService',
'siteAnalyticsService', 'ExplorationPlayerStateService',
'TWO_CARD_THRESHOLD_PX', 'CONTENT_FOCUS_LABEL_PREFIX', 'AlertsService',
'CONTENT_FOCUS_LABEL_PREFIX', 'AlertsService',
'CONTINUE_BUTTON_FOCUS_LABEL', 'EVENT_ACTIVE_CARD_CHANGED',
'EVENT_NEW_CARD_AVAILABLE', 'EVENT_PROGRESS_NAV_SUBMITTED',
'FatigueDetectionService', 'NumberAttemptsService',
'PlayerCorrectnessFeedbackEnabledService',
'RefresherExplorationConfirmationModalService',
'EXPLORATION_SUMMARY_DATA_URL_TEMPLATE',
'EXPLORATION_SUMMARY_DATA_URL_TEMPLATE', 'INTERACTION_SPECS',
'EVENT_NEW_CARD_OPENED', 'HintsAndSolutionManagerService',
'AudioTranslationManagerService', 'EVENT_AUTOPLAY_AUDIO',
function(
Expand All @@ -270,13 +270,13 @@ oppia.directive('conversationSkin', [
LearnerParamsService, PlayerPositionService,
ExplorationRecommendationsService, StatsReportingService,
siteAnalyticsService, ExplorationPlayerStateService,
TWO_CARD_THRESHOLD_PX, CONTENT_FOCUS_LABEL_PREFIX, AlertsService,
CONTENT_FOCUS_LABEL_PREFIX, AlertsService,
CONTINUE_BUTTON_FOCUS_LABEL, EVENT_ACTIVE_CARD_CHANGED,
EVENT_NEW_CARD_AVAILABLE, EVENT_PROGRESS_NAV_SUBMITTED,
FatigueDetectionService, NumberAttemptsService,
PlayerCorrectnessFeedbackEnabledService,
RefresherExplorationConfirmationModalService,
EXPLORATION_SUMMARY_DATA_URL_TEMPLATE,
EXPLORATION_SUMMARY_DATA_URL_TEMPLATE, INTERACTION_SPECS,
EVENT_NEW_CARD_OPENED, HintsAndSolutionManagerService,
AudioTranslationManagerService, EVENT_AUTOPLAY_AUDIO) {
$scope.CONTINUE_BUTTON_FOCUS_LABEL = CONTINUE_BUTTON_FOCUS_LABEL;
Expand All @@ -287,7 +287,7 @@ oppia.directive('conversationSkin', [
var MIN_CARD_LOADING_DELAY_MSEC = 950;

var hasInteractedAtLeastOnce = false;
var _answerIsBeingProcessed = false;
$scope.answerIsBeingProcessed = false;
var _nextFocusLabel = null;
// This variable is used only when viewport is narrow.
// Indicates whether the tutor card is displayed.
Expand Down Expand Up @@ -316,7 +316,7 @@ oppia.directive('conversationSkin', [
UrlInterpolationService.getStaticImageUrl);

$scope.activeCard = null;
$scope.numProgressDots = 0;
var numVisibleCards = 0;

$scope.upcomingStateName = null;
$scope.upcomingContentHtml = null;
Expand Down Expand Up @@ -375,6 +375,15 @@ oppia.directive('conversationSkin', [
$scope.activeCard);
};

$scope.isSupplementalNavShown = function() {
var interaction = ExplorationPlayerService.getInteraction(
$scope.activeCard.stateName);
return (
Boolean(interaction.id) &&
INTERACTION_SPECS[interaction.id].show_generic_submit_button &&
$scope.isCurrentCardAtEndOfTranscript());
};

// Navigates to the currently-active card, and resets the
// 'show previous responses' setting.
var _navigateToActiveCard = function() {
Expand Down Expand Up @@ -425,7 +434,7 @@ oppia.directive('conversationSkin', [
LearnerParamsService.init(newParams);
}

$scope.numProgressDots++;
numVisibleCards++;

var totalNumCards = PlayerTranscriptService.getNumCards();

Expand All @@ -436,23 +445,22 @@ oppia.directive('conversationSkin', [
var nextSupplementalCardIsNonempty = isSupplementalCardNonempty(
PlayerTranscriptService.getLastCard());

if (totalNumCards > 1 && !$scope.isViewportNarrow() &&
if (totalNumCards > 1 &&
ExplorationPlayerService.canWindowShowTwoCards() &&
!previousSupplementalCardIsNonempty &&
nextSupplementalCardIsNonempty) {
PlayerPositionService.setActiveCardIndex(
$scope.numProgressDots - 1);
PlayerPositionService.setActiveCardIndex(numVisibleCards - 1);
animateToTwoCards(function() {});
} else if (
totalNumCards > 1 && !$scope.isViewportNarrow() &&
totalNumCards > 1 &&
ExplorationPlayerService.canWindowShowTwoCards() &&
previousSupplementalCardIsNonempty &&
!nextSupplementalCardIsNonempty) {
animateToOneCard(function() {
PlayerPositionService.setActiveCardIndex(
$scope.numProgressDots - 1);
PlayerPositionService.setActiveCardIndex(numVisibleCards - 1);
});
} else {
PlayerPositionService.setActiveCardIndex(
$scope.numProgressDots - 1);
PlayerPositionService.setActiveCardIndex(numVisibleCards - 1);
}

if (ExplorationPlayerStateService.isStateTerminal(stateName)) {
Expand Down Expand Up @@ -528,7 +536,7 @@ oppia.directive('conversationSkin', [

$scope.submitAnswer = function(answer, interactionRulesService) {
// Safety check to prevent double submissions from occurring.
if (_answerIsBeingProcessed ||
if ($scope.answerIsBeingProcessed ||
!$scope.isCurrentCardAtEndOfTranscript() ||
$scope.activeCard.destStateName) {
return;
Expand All @@ -544,7 +552,7 @@ oppia.directive('conversationSkin', [
}
NumberAttemptsService.submitAttempt();

_answerIsBeingProcessed = true;
$scope.answerIsBeingProcessed = true;
hasInteractedAtLeastOnce = true;

var _oldStateName = PlayerTranscriptService.getLastCard().stateName;
Expand Down Expand Up @@ -676,7 +684,7 @@ oppia.directive('conversationSkin', [
ExplorationPlayerService.getRandomSuffix());
}
}
_answerIsBeingProcessed = false;
$scope.answerIsBeingProcessed = false;
}, millisecsLeftToWait);
}
);
Expand Down Expand Up @@ -786,27 +794,18 @@ oppia.directive('conversationSkin', [
}
});

$scope.windowWidth = WindowDimensionsService.getWidth();
$scope.canWindowShowTwoCards = function() {
return ExplorationPlayerService.canWindowShowTwoCards();
};

$window.onresize = function() {
$scope.adjustPageHeight(false, null);
$scope.windowWidth = WindowDimensionsService.getWidth();
};

$window.addEventListener('scroll', function() {
fadeDotsOnScroll();
fixSupplementOnScroll();
});

var fadeDotsOnScroll = function() {
var progressDots = $('.conversation-skin-progress-dots');
var progressDotsTop = progressDots.height();
var newOpacity = Math.max(
(progressDotsTop - $(window).scrollTop()) / progressDotsTop, 0);
progressDots.css({
opacity: newOpacity
});
};

var fixSupplementOnScroll = function() {
var supplementCard = $('div.conversation-skin-supplemental-card');
var topMargin = $('.navbar-container').height() - 20;
Expand All @@ -819,15 +818,6 @@ oppia.directive('conversationSkin', [
}
};

$scope.isViewportNarrow = function() {
return $scope.windowWidth < TWO_CARD_THRESHOLD_PX;
};

$scope.isWindowNarrow = function() {
// TODO(allan): Resolve discrepancy with isViewportNarrow.
return WindowDimensionsService.isWindowNarrow();
}

$scope.initializePage();
LearnerViewRatingService.init(function(userRating) {
$scope.userRating = userRating;
Expand Down
7 changes: 7 additions & 0 deletions core/templates/dev/head/pages/exploration_player/PlayerServices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ oppia.factory('ExplorationPlayerService', [
'ReadOnlyExplorationBackendApiService',
'EditableExplorationBackendApiService', 'AudioTranslationLanguageService',
'LanguageUtilService', 'NumberAttemptsService', 'AudioPreloaderService',
'WindowDimensionsService', 'TWO_CARD_THRESHOLD_PX',
'PlayerCorrectnessFeedbackEnabledService',
'GuestCollectionProgressService',
'WHITELISTED_COLLECTION_IDS_FOR_SAVING_GUEST_PROGRESS',
Expand All @@ -47,6 +48,7 @@ oppia.factory('ExplorationPlayerService', [
ReadOnlyExplorationBackendApiService,
EditableExplorationBackendApiService, AudioTranslationLanguageService,
LanguageUtilService, NumberAttemptsService, AudioPreloaderService,
WindowDimensionsService, TWO_CARD_THRESHOLD_PX,
PlayerCorrectnessFeedbackEnabledService,
GuestCollectionProgressService,
WHITELISTED_COLLECTION_IDS_FOR_SAVING_GUEST_PROGRESS) {
Expand Down Expand Up @@ -477,6 +479,11 @@ oppia.factory('ExplorationPlayerService', [
if (!_editorPreviewMode) {
StatsReportingService.recordSolutionHit(stateName);
}
},
// Returns whether the screen is wide enough to fit two
// cards (e.g., the tutor and supplemental cards) side-by-side.
canWindowShowTwoCards: function() {
return WindowDimensionsService.getWidth() > TWO_CARD_THRESHOLD_PX;
}
};
}
Expand Down
102 changes: 0 additions & 102 deletions core/templates/dev/head/pages/exploration_player/ProgressDotsDirective.js
View file

This file was deleted.

Loading

0 comments on commit d6aabd5

Please sign in to comment.