اگر با سایت‌های آموزشی تعاملی (مانند انگلیش‌سنترال) یا با سیستم‌های مدیریت آموزش (مانند مودل) کار کرده باشید لابد می‌دانید تعامل آموزشی با کاربر چقدر به یادگیری کمک می‌کند و همچنین باعث جذابیت سایت می‌شود.
پروژه‌ی اوپن‌سورس (متن‌باز) و رایگان H4P پروژه‌ای برای تولید محتواهای تعاملی (مانند ویدئوهای تعاملی، سیستم تشخیص صدا، بازی‌های ساده، آزمون‌های مختلف، فلش‌کارت و...) در بستر HTML5 (با کمک جاوا اسکریپت) است.
اهداف پروژه‌ی اچ‌فایوپی
اهداف پروژه‌ی H5P عبارتند از:
1- جذب جامعه‌ای بزرگ و جهانی از متخصصانی که لایبرری‌های H5P را می‌سازند، استفاده می‌کنند و به اشتراک می‌گذارند.
2- آسان کردن به اشتراک گذاری جهانی طیف وسیعی از محتواها و فناوری‌های مبتنی بر html.
3- آسان کردن انتشار محتواهای html در سیستم‌های مدیریت محتوا (CMS)، سیستم‌های مدیریت آموزش (LMS) و سیستم‌های مدیریت محتوای آموزشی (LCMS) برای تولیدکنندگان محتوا.
4- مشارکت در ساخت محتواهای بهتر HTML5 با آسان کردن مشارکت و استفاده‌ی مجدد از فناوری‌های عظیم وب.
کاربردهای H5P
اچ‌فایوپی را می‌توان به رایگان در وردپرس، مودل و دروپال استفاده کرد یا با ساخت اکانت در سایت آن، مستقیما ساخت و در سایت خود قرار داد.
پس اگر می‌خواهید سایت آموزشی بسازید یا سایت خود را جذاب و اکتیو کنید می‌توانید از این پروژه استفاده کنید.
انواع محتواهای H5P
اچ‌فایوپی تاکنون 39 نوع محتوا دارد.
آکاردئون: Accordion
ساخت یک جعبه‌ی آکاردئونی که با کلیک روی هر عنوان، توضیحات آن بخش نمایش داده شود و در صورت لزوم، توضیحات سایر بخش‌ها پنهان شود. این نوع محتوا مانند کامپوننت collapse در بوت‌استرپ است.
Agamotto
با این نوع محتوا، می‌توانید دنباله‌ای از عکس‌ها درباره‌ی یک موضوع ایجاد کنید که کاربران بتوانند مراحل مختلف آن را ببینند. مثلا می‌توانید مراحل زوم در یک میکروسکوپ را شبیه‌سازی کنید یا برای نشان دادن نقشه‌ی ایران همراه با استان‌ها، نقشه‌ی راه‌ها، پستی و بلندی‌ها و... از آن استفاده کنید. یا مثلا فرض کنید از یک صحنه در چهار فصل بهار، تابستان، پاییز و زمستان عکس گرفته‌اید و می‌خواهید کاربر بتواند با حرکت موس، این تصاویر را مقایسه کند. همچنین امکان افزودن توضیح به هر عکس هم وجود دارد. نوع محتوای Image Juxtaposition هم همین امکان را به شما می‌دهد اما فقط با دو عکس.
آزمونک محاسباتی: Arithmetic Quiz
یک کوئیز محاسباتی چندگزینه‌ای چندمرحله‌ای. کاربر در هر مرحله باید پاسخ محاسبات (مثلا ضرب دو عدد) را در میان گزینه‌ها بیابد و در پایان نمره‌ی خود را ببیند.
ضبط صدا: Audio Recorder
با اضافه کردن این بخش به سایت خود، این امکان را به کاربر می‌دهید که صدای خود را ضبط کند و سپس همان جا پخش کند یا در قالب یک فایل wav دانلود کند. این بخش، می‌تواند برای سایت‌های آموزش زبان به کار گرفته شود. این نوع محتوا فعلا فقط در کروم، فایرفاکس و اج قابلیت اجرا دارد. این نوع محتوا در کنار Speak the Words Set می‌تواند به عنوان سیستم تشخیص صدا به کار رود.
نمودار: Chart
کشیدن نمودارهای دایره‌ای و ستونی با امکان اضافه کردن توضیح و برچسب. گفتنی است در این زمینه استفاده از کتابخانه‌ی جاوا اسکریپتی D3 از نظر تنوع نمودارها بهتر عمل می‌کند.
کلاژ:Collage
اگر می‌خواهید مانند سایت‌های مبتنی بر عکس (مانند سایت unsplash که عکس‌های رایگان را به اشتراک می‌گذارد) عکس‌ها را در سایت خود به شکل زیبایی کنار هم بچینید می‌توانید از این نوع محتوا استفاده کنید.
ستون: Column
اگر می‌خواهید انواع محتوای ساده (عکس، متن، ویدئو و...) و انواع محتواهای h5p (مانند پرسش‌های چهارگزینه‌ای، دراگ اند دراپ‌ها و...) را در یک ستون و زیر هم قرار دهید می‌توانید از این نوع محتوا استفاده کنید (البته امکانات فریم‌ورک‌هایی مانند بوت‌استرپ نیز برای این منظور کافی است).
نمایش اسلایدی: Course Presentation
با این نوع محتوا، می‌توانید نوعی ساختار اسلایدی (مانند پاورپوینت یا سایت اسلایدشیر) را در سایت خود پیاده‌سازی کنید. همچنین می‌توانید مانند نرم‌افزارهای ساخت اسلایدهای تعاملی (مانند استوری‌لاین) در هر اسلاید، سوال و جواب هم قرار دهید و از مخاطب بازخورد بگیرید.
فلش‌کارت‌های صوتی: Dialog Cards
در این نوع محتوا می‌توانید فلش‌کارت‌هایی بسازید که یک طرف آن‌ها عکس، توضیح و صوت باشد و طرف دیگر آن متنی دیگر. این نوع محتوا برای ساخت فلش‌کارت‌های آموزش واژه مناسب است.
ابزار مستندسازی: Documentation Tool
در ابزار مستندسازی می‌توانید در یک صفحه، چندین بخش بسازید که از طریق یک فهرست درختی قابل دسترسی هستند و در هر بخش، کاربر اطلاعاتی را وارد کند. مثلا فرض کنید می‌خواهید کاربر در چند مرحله اطلاعات خود را در سایت وارد کند و در پایان یک فرم کامل و تک‌صفحه‌ای از اطلاعات به او داده شود. در یک مرحله مشخصات فردی خود را بنویسد، در مرحله‌ی بعدی اطلاعات تحصیلی و در پایان بتواند همه‌ی اطلاعات خود را در یک فرم در کنار هم ببیند و از آن‌ها خروجی بگیرد.
کشیدن و رها کردن: Drag and Drop
ساخت انواع محتواهای کشیدن و رها کردن (دراگ اند دراپ) با این نوع محتوا امکان‌پذیر است. فرقی نمی‌کند که این کار با کشیدن عکس‌ها و رها کردن روی عکس‌ها انجام شود یا با کشیدن متن‌ها و رها کردن روی عکس‌ها . مثلا می‌توانید یک بازی بسازید که در آن نام هر استان ایران روی محل آن قرار بگیرد و در پایان به کاربر امتیاز داده شود.
کشیدن واژه‌ها: Drag the Words
مانند نوع قبلی است اما این بار برای متن‌ها. مثلا با این نوع می‌توانید سوالات «وصل کنید» را در سایت خود قرار دهید.
انشانویسی: Essay
با این نوع محتوا، می‌توانید از کاربر بخواهید یک متن بنویسد و سپس با توجه به قوانینی که تعریف می‌کنید به او نمره دهید. مثلا از کاربر می‌خواهید یک رمان را خلاصه کند و سپس در قوانین می‌گویید اگر کلمات کلیدی این رمان به کار گرفته شد به او نمره داده شود.
جای خالی را پر کنید:Fill in the Blanks
از اسم این نوع محتوا مشخص است که چه می‌کند! یک متن به کاربر بدهید و از او بخواهید جاهای خالی را پر کند و سپس به او نمره دهید (این نوع محتوا را با امکانات مودل هم می‌توان ساخت).
یافتن نقاط کانونی: Find Multiple Hotspots
اگر می‌خواهید یک پرسش تصویری در سایت خود بسازید می‌توانید از این نوع محتوا استفاده کنید. مثلا پرسش «همه‌ی انواع سبزیجات موجود در تصویر را انتخاب کنید» یا «چه ابزارهای آشپزخانه‌ای در تصویر می‌بینید» که کاربر باید در یک عکس این موارد را مشخص کند. همچنین می‌توانید در پایان کار، به مخاطب درباره‌ی پاسخ‌های درست یا اشتباهش بازخورد دهید.
یافتن نقطه‌ی کانونی: Find the Hotspot
این مورد هم مانند مورد قبلی است اما فقط امکان انتخاب یک مورد را به کاربر می‌دهد. مثلا فرض کنید می‌خواهید یک پرسش چهارگزینه‌ای بسازید که گزینه‌هایش تصویر هستند. کافی است با این نوع محتوا، یک عکس آپلود کنید و مشخص کنید اگر کاربر در کدام بخش از عکس کلیک کرد، به او بازخورد مثبت داده شود.
فلش‌کارت: Flashcards
ساخت فلش‌کارت‌های تعاملی (که روی هر کارت، یک تصویر یا پرسش باشد و کاربر بتواند به پرسش پاسخ دهد) کار این نوع محتوا است. همچنین می‌توانید به کاربر در هر مورد بازخورد دهید.
حدس پاسخ: Guess the Answer
این نوع محتوا بسیار ساده است. یک عکس آپلود می‌کنید و یک سوال از کاربر می‌پرسید. یک دکمه نیز زیر عکس است که پس از کلیک کردن روی آن پاسخ به او نشان داده می‌شود.
جانشانی آی‌فریم: Iframe Embedder
با این نوع محتوا می‌توانید یک محتوای خارجی یا یکی از انواع محتواهای H5P را در سایت خود جانشانی (امبد) کنید.
نقاط کانونی عکس: Image Hotspots
اگر می‌خواهید یک عکس داشته باشید که با کلیک روی هر بخش از آن توضیحات خاصی (در قالب متنی، عکسی یا ویدئویی) ظاهر شود از این نوع محتوا استفاده کنید.
مجاورت عکس‌ها: Image Juxtaposition
با این نوع محتوا می‌توانید دو عکس را کنار هم قرار دهید و کاربر با کشیدن خط افقی یا عمودی میان آن‌ها یکی از دو عکس را روی دیگری بیاورد. مثلا فرض کنید شما یک شرکت ساختمانی دارید و می‌خواهید مخاطبان شما بتوانند ساختمان را پیش از کامل شدن با ساختمان پس از کامل شدن، با هم مقایسه کنند. این نوع محتوا می‌تواند به شما کمک کند که این کار را انجام دهید. نوع محتوای Agamotto هم همین کار را می‌کند اما برای چند عکس.
جفت کردن عکس: Image pairing
با این نوع محتوا می‌توانید دو مجموعه عکس را کنار هم قرار دهید و کاربر باید عکس‌های مشابه مجموعه‌ی اول با مجموعه‌ی دوم را کنار هم قرار دهد (با کشیدن عکس‌ها روی هم یا کلیک روی آن‌ها). با این ابزار می‌توانید بازی‌های جالبی در سایت خود بسازید.
مرتب‌سازی عکس: Image Sequencing
با این نوع محتوا می‌توانید چند عکس را کنار هم قرار دهید و از کاربر بخواهید آن‌ها را مرتب کند. مثلا مجموعه عکس‌های رئیس‌جمهورهای ایران یا ترتیب ماه‌ها و...
اسلایدر عکس: Image Slider
ساخت یک اسلایدر عکس که البته در بسیاری از فریم‌ورک‌های فرانت‌اند (مانند بوت‌استرپ) هم وجود دارد.
اسلایدر حرفه‌ای: Impressive Presentation (ALPHA)
ساخت یک اسلایدر سه‌بعدی و جذاب که می‌تواند تقریبا مشابه prezi باشد (مثلا: جابجایی بین اسلایدها به شکل زوم این و زوم اوت) و در هر مرحله از آن محتواهای متنوع h5p (مانند پرسش‌ها و بازی‌ها) قرار گیرد. این نوع محتوا فقط در کروم کار می‌کند و ساختن آن کمی دشوار است.
ویدئوی تعاملی: Interactive Video
این یکی از جذابترین انواع محتوا در h5p است که مشابه آن را می‌توانید در سایت انگلیش‌سنترال ببینید. همچنین اگر در یوتیوب کانالی داشته باشید می‌دانید که می‌شود در ثانیه‌های خاصی دکمه‌ها، تصاویر یا لینک‌هایی به کاربر نشان داده شود. اما ویدئوی تعاملی در این جا کمی فراتر است. شما می‌توانید در میان ویدئو از کاربر سوالی بپرسید که فقط اگر درست جواب داد، ادامه‌ی ویدئو پخش شود.
علامت زدن واژه‌ها: Mark the Words
در این نوع محتوا می‌توانید متنی به کاربر نشان دهید و از او بخواهید کلمات خاصی را در آن علامت بزند و سپس بر اساس درست یا اشتباه جواب دادن او، بازخورد دهید.
بازی حافظه: Memory Game
شما می‌توانید یک بازی حافظه‌ی ساده با این نوع محتوا بسازید. تعدادی عکس که به پشت برگردانده شده‌اند و کاربر روی هر کدام کلیک کند تصویر به او نمایش داده می‌شود. هدف این است که کاربر عکس‌های یکسان را پشت سر هم انتخاب کند و امتیاز بگیرد.
چندگزینه‌ای: Multiple Choice
از نام این نوع محتوا مشخص است که چه می‌کند. یک سوال چندگزینه‌ای می‌سازد!
آزمونک شخصیت: Personality Quiz
با این نوع محتوا می‌توانید یک کوئیز چند مرحله‌ای بسازید و در پایان بر اساس انتخاب‌هایش بازخورد دهید. مثلا می‌توانید یک آزمون شخصیت‌شناسی را با این نوع محتوا بسازید.
پرسشنامه: Questionnaire
اگر می‌خواهید یک پرسشنامه بسازید و در پایان پاسخ‌های کاربران خود را در سایت خود یا به گوگل آنالیتیکز ارسال کنید، از این نوع محتوا استفاده کنید. می‌توانید مشخص کنید که هر سوال ضروری است یا نه و همچنین سوال‌های شما می‌تواند پاسخ متنی یا گزینه‌ای داشته باشد.
آزمونک (مجموعه سوال): Quiz (Question Set)
ساخت یک مجموعه سوال در یک صفحه. سوالات می‌توانند در انواع مختلفی باشند (چندگزینه‌ای، وصل‌کردنی، متنی) و در پایان به کاربر بازخورد داده شود.
مجموعه‌ی تک‌جوابی: Single Choice Set
ساخت یک مجموعه سوال چندگزینه‌ای که هر کدام یک پاسخ درست دارد و در پایان نتیجه‌ی آزمون مشخص می‌شود.
بیان واژه‌ها: Speak the Words
با این نوع محتوا می‌توانید از کاربر یک سوال بپرسید و او پاسخ را در میکروفون بگوید. این نوع محتوا، پاسخ کاربر را با پاسخ درست مقایسه می‌کند و در صورت درست بودن به او بازخورد می‌دهد. این نوع محتوا برای زبان‌های زیادی کار می‌کند اما متاسفانه هنوز از زبان فارسی پشتیبانی نمی‌کند. این نوع محتوا فعلا فقط در کروم کار می‌کند.
مجموعه بیان واژه‌ها: Speak the Words Set
مانند همان نوع قبلی است اما این بار چندین سوال را می‌توان در یک صفحه تعریف کرد.
خلاصه: Summary
در این نوع محتوا، کاربر باید از بین چند گزینه، گزینه‌های درست را انتخاب کند. مثلا شما متنی را به کاربر نشان می‌دهید و از او می‌خواهید گزینه‌هایی را که در متن به آن‌ها اشاره شده انتخاب کند.
تایم لاین: Timeline
در این نوع محتوا می‌توانید یک تایم لاین (سیر زمانی) درست کنید و در هر زمان، مطلبی را (متن، عکس و محتواهای سایت‌هایی مثل توئیتر، یوتیوب و...) قرار دهید. مثلا فرض کنید می‌خواهید تاریخ یک شهر یا تاریخچه‌ی تاسیس شرکت خود یا زندگینامه‌ی خود را به شکلی جذاب در سایت خود قرار دهید.
سوال درست/ غلط: True/False Question
سوالاتی را که فقط دو گزینه‌ی درست و غلط دارند می‌توانید با این نوع محتوا بسازید و سپس پاسخ صحیح را به کاربر نشان دهید.
Twitter User Feed
نمایش توئیت‌های یک اکانت خاص در صفحه‌ی سایت شما (این نوع محتوا به درستی در ایران فعال نیست).
نتیجه
h5p از لحاظ متن‌باز و رایگان بودن پروژه‌ی جذابی است. شاید شما هر کدام از موارد بالا را بتوانید در انواع فریم‌ورک‌ها و کدهای دیگر بیابید اما هنر اچ‌فایوپی این است که این مجموعه را کنار هم جمع کرده و به شما کمک می‌کند با کمترین دانش برنامه‌نویسی یک سایت تعاملی جذاب و یکدست خلق کنید.
نکته: در هنگام استفاده از انواع محتواهای h5p به مجوز انتشار آن‌ها توجه کنید.
