NAN_Student_Handbook/templates/internal/online-learning-and-remote-work.php

<?php

$onlineLearningTips = [

  [
    'title' => 'Have Goals',
    'content' => [
      'Define your reasons for studying, set daily, weekly, and monthly goals for studying and doing assignments'
    ]
  ],
  [
    'title' => 'Be Focused',
    'content' => [
      'Create a quiet, organized study space'
    ]
  ],
  [
    'title' => 'Identify what works for you',
    'content' => [
      'Be aware of your daily responsibilities, how you study, and your energy levels during certain parts of the day, etc.'
    ]
  ],
  [
    'title' => 'Schedule your time',
    'content' => [
      'You are in charge of creating a routine that works for you'
    ]
  ],
  [
    'title' => 'Organize your work',
    'content' => [
      'Know your workload & due dates'
    ]
  ],
  [
    'title' => 'Attend your classes',
    'content' => [
      'Visit classes when they are live or set a schedule for you to do your async coursework'
    ]
  ],
  [
    'title' => 'Make the most of what your College/University has to offer',
    'content' => [
      'Contact the Student Support Centre for help managing your timetable and choosing courses',
      'Career and employability resources e.g., help with writing or choosing a career path',
      'Help for students with disabilities',
      'Resources to help you learn the technology skills your course requires',
      'Resources to improve your study skills',
      'Connect with tutors'
    ]
  ],
  [
    'title' => 'Connect',
    'content' => [
      'Socialize and work with other online learners'
    ]
  ],
  [
    'title' => 'Make sure you have supports in place',
    'content' => [
      'Family & Friends',
      'Childcare needs',
      'Financial assistance',
      'Employer communication'
    ]
  ],
  [
    'title' => 'Talk to your employer',
    'content' => [
      'Sponsorship: some companies may be able to fund or even partially fund your studies',
      'Study leave: they may be willing to work around your exams or big assignments',
      'Flexible work arrangement: your work may have a work from home policy which could allow you to use your saved commuting time to study',
      'Unpaid leave: your company may be able to offer a few unpaid leave days if you need them to fit in your studying'
    ]
  ],
  [
    'title' => 'Embrace Technology',
    'content' => [
      'Make use of free productivity apps',
      '“Calendar” app on your phone',
      '“Evernote” for class notes',
      '“Easybib” for citations or bibliographies',
      '“Mendely” for sharing and keeping track of your research',
      '“Doodle” for scheduling meetings'
    ]
  ],
  [
    'title' => 'Backup EVERYTHING',
    'content' => [
      'You never know when your computer will crash or when you might spill your 2:00 a.m. coffee on your computer'
    ]
  ],
  [
    'title' => 'Be mindful of online etiquette',
    'content' => [
      'Read out loud before pressing send. You will be able to check for errors as well as your tone'
    ]
  ],
];


?>

<article>

  <div class="bg-white">
    <h2 class="text-xl p-4 text-red-500 font-bold">Online Learning & Working From Home</h2>
    <div class="px-4">
      <p class="font-medium">
        Benefits of online learning:
      </p>
      <ul class="list-disc px-8 space-y-2 py-2">
        <li>You can study wherever you want</li>
        <li>Most times you can build your own schedule</li>
        <li>Could potentially save money (travel,parking, etc.)</li>
        <li>Learn while balancing life and working</li>
      </ul>

      <div class="py-8 space-y-4 lg:w-1/2 lg:grid grid-cols-2 mx-auto">
        <img src="<?= get_template_directory_uri() ?>/assets/images/bgs/online-learning.png" alt="Online Learning">
        <img class="w-1/3 lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/remote-work.png" alt="Online Learning">
      </div>

    </div>
    <div class="px-4">
      <p class="font-medium">
        Skills to support online learning:
      </p>
      <ul class="list-disc px-8 space-y-2 py-2">
        <li>Self-regulated</li>
        <li>Effective Time Management (i.e., short term and long-term goals, due dates)</li>
        <li>Independent Learner</li>
        <li>Communication skills (it is important to reach out to your professors to arrange a time to ask questions or speak to them. Just because they are not there in person doesn’t mean you can’t build a good relationship with them).</li>
      </ul>

      <div class="py-8 space-y-4 lg:grid grid-cols-2 mx-auto items-center">
        <img src="<?= get_template_directory_uri() ?>/assets/images/bgs/independent-learning.png" alt="Indepenedent Learning">
        <img class="lg:w-1/2 mx-auto" src="<?= get_template_directory_uri() ?>/assets/images/bgs/fit-school-into-life.png" alt="Fit School Into Life">
      </div>
    </div>
  </div>

  <!-- Tips For Online Learning Success -->
  <div class="flex flex-col bg-white">

    <div class="py-4 bg-green-600 px-6">
      <p class="font-bold text-white">Tips for Online Learning Success:</p>
    </div>

    <!-- Tips Loop -->
    <div class="flex flex-1 flex-col">
      <div class="flex flex-1 flex-col gap-y-7">

        <div>
          <ul role="list" class="text-blue-900">

            <!-- Differences Loop -->
            <?php

            foreach ($onlineLearningTips as $tip) {

            ?>

              <li class="accordion tips-columns">
                <div class="flex px-2 rounded-md justify-between">
                  <a href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
                    <p><?php echo $tip['title'] ?></p>
                  </a>

                  <button class="accordion-toggle">
                    <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
                    <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
                  </button>

                </div>
                <div class="accordion-content space-y-4">

                  <!-- Tip Content  -->
                  <div>
                    <ul class="<?php
                                if (count($tip['content']) > 1) {
                                  echo (count($tip['content']) > 1) ? 'list-disc list-inside' : '';
                                } ?>">
                      <?php
                      foreach ($tip['content'] as $info) { ?>
                        <li class="mb-2">
                          <?php echo $info ?>
                        </li>
                      <?php } ?>
                    </ul>
                  </div>
                </div>
              </li>


            <?php } ?>

          </ul>
        </div>

      </div>
    </div>

  </div>

  <div class="py-8 space-y-4 px-4 lg:w-1/2  mx-auto">
    <img class="lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/share-achievements.png" alt="Online Learning">
  </div>

</article>