Adding eventing to the course tools.
LEARNER-1652 We now send log events when the user clicks on the events in the course toolbar, representing a change to the new page.
This commit is contained in:
Harry Rein
@@ -0,0 +1,100 @@
|
||||
<div class="course-view container" id="course-container">
|
||||
<header class="page-header has-secondary">
|
||||
<div class="page-header-main">
|
||||
<nav aria-label="Course Outline" class="sr-is-focusable" tabindex="-1">
|
||||
<h2 class="hd hd-3 page-title">Reviews Test Course</h2>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="page-header-secondary">
|
||||
<div class="page-header-search">
|
||||
<form class="search-form" role="search" action="/courses/course-v1:W3Cx+HTML5.0x+1T2017/search/">
|
||||
<label class="field-label sr-only" for="search" id="search-hint">Search the course</label>
|
||||
<input
|
||||
class="field-input input-text search-input"
|
||||
type="search"
|
||||
name="query"
|
||||
id="search"
|
||||
placeholder="Search the course"
|
||||
/>
|
||||
<button class="btn btn-small search-button" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<a class="btn btn-brand action-resume-course" href="${resume_course_url}">
|
||||
Start Course
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="page-content">
|
||||
<div class="layout layout-1t2t">
|
||||
<main class="layout-col layout-col-b">
|
||||
<div class="section section-dates">
|
||||
<div class="welcome-message">
|
||||
<div class="dismiss-message">
|
||||
<button type="button" class="btn-link">Dismiss</button>
|
||||
</div>
|
||||
This is a major update!
|
||||
</div>
|
||||
</div>
|
||||
<main role="main" class="course-outline" id="main" tabindex="-1">
|
||||
<ol class="block-tree" role="tree">
|
||||
<li aria-expanded="true" class="outline-item focusable section" id="block-v1:W3Cx+HTML5.0x+1T2017+type@chapter+block@451e0388724c4f1fafba1b218ce16582" role="treeitem" tabindex="0">
|
||||
<div class="section-name">
|
||||
<h3>Testing</h3>
|
||||
</div>
|
||||
<ol class="outline-item focusable" role="group" tabindex="0">
|
||||
<li class="subsection " role="treeitem" tabindex="-1" aria-expanded="true">
|
||||
<a class="outline-item focusable" href="http://localhost:8000/courses/course-v1:W3Cx+HTML5.0x+1T2017/jump_to/block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6" id="block-v1:W3Cx+HTML5.0x+1T2017+type@sequential+block@77a74ef4daa74c83b00d0b1e0e6d81f6">
|
||||
<div class="subsection-text">
|
||||
<span class="subsection-title">Still Testing Subsection</span>
|
||||
|
||||
<div class="details">
|
||||
|
||||
</div> <!-- /details -->
|
||||
</div> <!-- /subsection-text -->
|
||||
<div class="subsection-actions">
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</main>
|
||||
</main>
|
||||
<aside class="course-sidebar layout-col layout-col-a">
|
||||
<div class="section section-tools">
|
||||
<h3 class="hd-6">Course Tools</h3>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/bookmarks/">
|
||||
<span class="icon fa fa-bookmark" aria-hidden="true"></span>
|
||||
Bookmarks
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/reviews">
|
||||
<span class="icon fa fa-star" aria-hidden="true"></span>
|
||||
Reviews
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="course-tool-link" href="/courses/course-v1:W3Cx+HTML5.0x+1T2017/course/updates">
|
||||
<span class="icon fa fa-newspaper-o" aria-hidden="true"></span>
|
||||
Updates
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section section-dates">
|
||||
<h3 class="hd hd-6 handouts-header">Important Course Dates</h3>
|
||||
<div class="date-summary-container">
|
||||
<div class="date-summary date-summary-todays-date">
|
||||
<span class="hd hd-6 heading localized-datetime" data-datetime="2017-07-13 17:31:27.952061+00:00" data-string="Today is {date}" data-timezone="None" data-language="en">Today is Jul 13, 2017 13:31 EDT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,18 @@
|
||||
/* globals Logger */
|
||||
|
||||
export class CourseHome { // eslint-disable-line import/prefer-default-export
|
||||
constructor(options) {
|
||||
// Logging for course tool click events
|
||||
const $courseToolLink = $(options.courseToolLink);
|
||||
$courseToolLink.on('click', () => {
|
||||
const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
|
||||
Logger.log(
|
||||
'edx.course.tool.accessed',
|
||||
{
|
||||
tool_name: courseToolName,
|
||||
page: 'course_home',
|
||||
},
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
/* globals Logger, loadFixtures */
|
||||
|
||||
import { CourseHome } from '../CourseHome';
|
||||
|
||||
describe('Course Home factory', () => {
|
||||
describe('Ensure course tool click logging', () => {
|
||||
let home; // eslint-disable-line no-unused-vars
|
||||
|
||||
beforeEach(() => {
|
||||
loadFixtures('course_experience/fixtures/course-home-fragment.html');
|
||||
home = new CourseHome({
|
||||
courseToolLink: '.course-tool-link',
|
||||
});
|
||||
spyOn(Logger, 'log');
|
||||
});
|
||||
|
||||
it('sends an event when an course tool is clicked', () => {
|
||||
document.querySelector('.course-tool-link').dispatchEvent(new Event('click'));
|
||||
const courseToolName = document.querySelector('.course-tool-link').text.trim().toLowerCase();
|
||||
expect(Logger.log).toHaveBeenCalledWith(
|
||||
'edx.course.tool.accessed',
|
||||
{
|
||||
tool_name: courseToolName,
|
||||
page: 'course_home',
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -74,7 +74,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
|
||||
<ul class="list-unstyled">
|
||||
% for course_tool in course_tools:
|
||||
<li>
|
||||
<a href="${course_tool.url(course_key)}">
|
||||
<a class="course-tool-link" href="${course_tool.url(course_key)}">
|
||||
<span class="icon ${course_tool.icon_classes()}" aria-hidden="true"></span>
|
||||
${course_tool.title()}
|
||||
</a>
|
||||
@@ -102,3 +102,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
|
||||
% endif
|
||||
</div>
|
||||
</%block>
|
||||
|
||||
<%static:webpack entry="CourseHome">
|
||||
new CourseHome({
|
||||
courseToolLink: ".course-tool-link",
|
||||
});
|
||||
</%static:webpack>
|
||||
|
||||
@@ -18,6 +18,7 @@ var wpconfig = {
|
||||
context: __dirname,
|
||||
|
||||
entry: {
|
||||
CourseHome: './openedx/features/course_experience/static/course_experience/js/CourseHome.js',
|
||||
CourseOutline: './openedx/features/course_experience/static/course_experience/js/CourseOutline.js',
|
||||
CourseSock: './openedx/features/course_experience/static/course_experience/js/CourseSock.js',
|
||||
CourseTalkReviews: './openedx/features/course_experience/static/course_experience/js/CourseTalkReviews.js',
|
||||
|
||||
Reference in New Issue
Block a user