Moodle: מסך קורס – קישור להרשמה

לפני כשנה, באפריל 2018, העלינו לאוויר עיצוב חדש לקמפוס של רשת אורט, שהוא מערכת מוודל. השינויים היו אמנם עיצוביים, אבל חלקם היו מאתגרים לא פחות משינויים פונקציונליים, ולכן אני רוצה לתעד אותם – גם כדי לשמר את העבודה הקשה, וגם כדי לשתף.

התנהגות ברירת המחדל של מוודל כשתלמיד נכנס לקורס שהוא לא רשום אליו והקורס פתוח להרשמה

העיצוב החדש הוא תבנית שבנינו, וביססנו אותה על תבנית Fordson. בתבנית Fordson, ובכלל בברירת המחדל של מוודל, כשתלמיד נכנס לקורס שהוא לא רשום אליו והקורס פתוח להרשמה, יש לו תחת גלגל השיניים שבפינה השמאלית העליונה, קישור להרשמה.

מה רצינו לשפר בתהליך שקורה במוודל

אצלנו באפיון, הוחלט שהקישור הזה חשוב מכדי שיוסתר תחת גלגל השיניים. כי הרשמה לקורס היא הפעולה הכי חשובה שבתלמיד צריך לבצע כאן, ואם היא חבויה ומצריכה לחיצה על גלגל השיניים כדי לראות אותה, קיים סיכון שהתלמיד לא יעשה את זה – גם מפני שקיים חשש שהוא לא יחשוב כלל ללחוץ על גלגל השיניים, וגם מפני שכשיש פעולות חשובות משתדלים לצמצם כמה שיותר את כמות הקליקים שהפעולה הזאת תצריך. לכן האיפיון קבע שהקישור הזה אמור להיות בולט, ולא להצריך הקלקלה על גלגל השיניים. כלומר, התבקשנו להוציא את הקישור החוצה, מחוץ לתפריט גלגל השיניים:

איך הוחלט על פתרון CSS-י לעניין

לכאורה אפשר היה לשלוט בזה ברמת ה-PHP: להוסיף את הקישור בעת יצירת הטאבים , ולהסיר אותו מתפריט גלגל השיניים. אבל היה קשה ללכוד את השלבים האלה בקוד, והוחלט שקל יותר יהיה להזיז את זה באמצעות CSS.

כדי לעשות זאת, צריך שיהיה קלאס מיוחד לגלגל השיניים כשיש תחתיו הקישור של רישום לקורס. חשבתי שזה יהיה פשוט מאוד – לגלות בקוד מתי יש זיהוי של המשתמש ככזה שמצריך קישור לרישום, ושם לתת קלאס לתפריט. דא עקא, מסתבר שהמקום שבו מזהים ויוצרים את הקישור לרישום הוא מקום אחר לגמרי מהמקום בו בונים את ה-HTML של גלגל השיניים: הזיהוי ויצירת הקישור נעשים בפונקציה enrol_add_course_navigation שנמצאת ב-lib/enrollib.php, ובניית התפריט נמצאת בפונקציה teacherdash שאצלנו, ב-theme/aviv2018/classes/output/core_renderer.php.

לכן מה שעשיתי זה העתקתי את הקוד שמזהה ויוצר את הקישור לרישום מ-lib/enrollib.php והכנסתי אותו בפונקציה teacherdash, וכשהתקיים התנאי – הוספתי את הקלאס has-enrol-link לפריט של הרשמה לקורס. את הקוד אספתי מכמה חלקים בפונקציה.
מאמר מוסגר: העתקת קוד היא פתרון לא הכי מהמם מפני שהיא מפרה את כלל ה-DRY (Don’t Repeat Yourself) ומפני שאם לא אעקוב תמידית אחרי שינויים במוודל עלול להגיע שלב שבו קוד במקור  שהעתקתי ישתנה ואני לא אדע שעליי לשנות גם בתבנית, אבל החלטתי לעשות זאת למרות זאת, כי לעת עתה זה עובד, וכי גם השדרוגים של המערכת אמורים להעשות בצורה מבוקרת, ואני מקווה שנשכיל להעתיק שינויים, אם יהיו:

// Lea 2017 - add class if there is a link to enroll so in CSS we can display it unhidden
$classenrol = '';
$coursecontext = context_course::instance($course->id);
$instances = enrol_get_instances($course->id, true);
$plugins = enrol_get_plugins(true);
if (!isguestuser() and isloggedin() and (!is_enrolled($coursecontext))) {
    // enrol link if possible
    if (is_viewing($coursecontext)) {
        // better not show any enrol link, this is intended for managers and inspectors
    } else {
        foreach ($instances as $instance) {
            if (!isset($plugins[$instance->enrol])) {
                continue;
            }
            $plugin = $plugins[$instance->enrol];
            if ($plugin->show_enrolme_link($instance)) {
                $classenrol = 'has-enrol-link';
                break;
            }
        }
    }
}

$editcog = html_writer::div($this->context_header_settings_menu(), 'pull-xs-right context-header-settings-menu ' . $classenrol);

עובד? משכפלים

אותו הדבר לגבי קישור להסרת רישום. המצב במוודל הוא שזה נראה כך:

ולפי העיצוב הוא אמור להיראות כך:

לשם כך עשיתי אותו הדבר, לקחתי את הקוד מ-enrol_add_course_navigation שנמצאת ב-lib/enrollib.php והעתקתי לפונקציה teacherdash שאצלנו, ב-theme/aviv2018/classes/output/core_renderer.php. עשיתי שינוי קל: עטפתי את הקוד בתנאי if (!isguestuser() && isloggedin()) {, ובתוכו בדקתי אם התלמיד רשום או לא. אם הוא רשום, זה הוספתי קוד שנותן קלאס לקישור להסרה מהרשמה:

if ((is_enrolled($coursecontext))) {
    // unenrol link if possible
    foreach ($instances as $instance) {
        if (!isset($plugins[$instance->enrol])) {
            continue;
        }
        $plugin = $plugins[$instance->enrol];
        if ($unenrollink = $plugin->get_unenrolself_link($instance)) {
            $classenrol = 'has-unenrol-link';                       
             break;
        }
    }
}

מיקוד רק לתפקיד מסוים

ובכל זאת, הייתה עוד בעיה: הדבר הזה קרה בכל תפקיד, ורצינו שזה יקרה רק אצל תלמיד.

גם כאן, דרך טובה יותר היא בעת נתינת הקלאס לבדוק את התפקיד, אבל כדי לזהות את המשתמש בפונקציה ההיא היה צורך ביותר מדי משתנים שלא היו לי ושלא הייתי צריכה לשומדבר אחר בפונקציה, ולכן החלטנו שגם את זה נעשה ב-CSS.

כך היה נראה הקוד של זיהוי המשתמש:

$roles = get_user_roles($coursecontext);
$role = '';
foreach ($roles as $role) {
    if ($role->shortname === 'student') {

    }
}

אבל כאמור במקום זה, החלטנו להשתמש ב-CSS. איך אפשר לזהות ב-CSS באיזה תפקיד מדובר? שאלה יפה. התשובה היא שלשם כך צריך בכל זאת קצת PHP: בפונקציה header() ב-core_renderer הוספנו קוד שהעתקתי מתשובה שניתנה בפורום המפתחים של מוודל, והוא נותן קלאס של התפקיד לתגית ה-body, וכך יכולנו למקד את הוצאת הקישור רק כשמדובר בתלמיד.

 if (is_siteadmin()) {
$this->page->add_body_class('courserole-admin');
}
/* code taken from: https://moodle.org/mod/forum/discuss.php?d=362674#p1462631*/
if ($roles = get_user_roles($coursecontext)) {
foreach ($roles as $role) {
$this->page->add_body_class('courserole-' . $role->shortname);
}
} else {
if (count($roles) === 0 && !is_guest($coursecontext) && !is_siteadmin() && $COURSE->category > 0) {
$this->page->add_body_class('courserole-none');
}

וזה ה-CSS שהוציא את הפריט הזה מהתפריט ומיקם אותו ליד הטאב של “בקורס זה”. בפרויקט הזה אני הייתי אחראית רק על ה-back end, ואת ה-CSS כתבה רחלי. קבלו את ה-CSS שלה במחיאות כפיים סוערות!

body.courserole-student:not(.courserole-admin) .has-enrol-link,
body.courserole-student:not(.courserole-admin) .has-unenrol-link {
  .editcogbutton {
    width: 0;
  }

  /*enrol link button - only for students*/
  .editcogbutton .context-header-settings-menu .dropdown {
    padding: 0;
  }

  .dropdown-toggle {
    display: none;
  }

  .dropdown-menu {
    display: block;
    position: absolute;
    margin-top: 0;
    top: -0.6rem;
    left: 10.6rem;
    border-radius: 0;
    background-color: $brand-primary;

    .dropdown-item {
      color: $buttons-text-color;
      font-size: $font-size-root;
      font-weight: 600;
      padding: 0.6rem 2rem;
      border: 0;

      &:hover,
      &:focus {
        background-color: $transparent;
        color: $brand-inverse;
      }

      a,
      a .icon {
        color: inherit;
      }
    }

     
  }
}

 
  /*disenrol link button - only for students*/
body.courserole-student:not(.courserole-admin) .has-unenrol-link {
  .dropdown-menu {
    top: -2.7rem;
    background-color: $gray-strong;

    a .icon:before {
      content: "\f235";
    }
  }
}

ועוד משימה קטנה

כדי להראות את גלגל השיניים בקורס, נטרלתי את $PAGE->theme->settings->courseeditingco בפונקציה teacherdash ב-core_renderer. זה היה סוג של עזרה ראשונה ועקרונית כדאי לחזור לזה, ושהפונקציה תקרא להורה שלה.

***

עד כאן להפעם. מעניין אותי לשמוע מכם אם גם אצלכם עלה צורך כזה, ואם לא, האם אתם יכולים לראות את היתרונות בהצעה כזו, לתת בולטות לכפתור ההרשמה לקורס, והאם לדעתכם יש בזה גם חסרונות.