Czym jest iframe i jak dodać interaktywne materiały do kursu WeStudy

Przygotowano prezentację, znaleziono dobre interaktywne ćwiczenie i stworzono ankietę dla uczestników. Pozostaje połączyć je w zrozumiałą lekcję. Przez iframe można wyświetlić zewnętrzny materiał bezpośrednio w kursie: uczestnik pracuje z nim w środowisku edukacyjnym, a prowadzący nadal edytuje oryginał w znanej usłudze.

Czym jest iframe w prostych słowach

Iframe to element HTML, który osadza jedną stronę internetową w innej. Wyobraź sobie okno wewnątrz lekcji: wokół pozostaje twój kurs, a w środku działa prezentacja, odtwarzacz lub ćwiczenie z zewnętrznej strony. Treść jest ładowana z tej usługi, a nie zamieniana w plik WeStudy.

Zwykły link proponuje przejście na inną stronę. Iframe pokazuje materiał na miejscu. Na przykład uczestnik może przewijać slajdy lub odpowiadać na pytania, pozostając na stronie materiału edukacyjnego. Konkretne możliwości zależą od usługi, która udostępniła kod.

To wygodne, gdy potrzebny zasób jest już gotowy. Jednocześnie iframe zależy od dostępności oryginału: jeśli autor go usunie lub zmieni uprawnienia dostępu, osadzony materiał także może przestać się otwierać.

Co można dodać do kursu WeStudy

W WeStudy istnieje osobny typ materiału iFrame. Pomaga uzupełniać program nauczania zasobami stworzonymi w innych narzędziach. Zacznij od zadania lekcji: co dokładnie ma zrobić uczestnik?

• Prezentacja do samodzielnego opracowania. Uczestnik przegląda slajdy we własnym tempie, a potem wykonuje krótkie zadanie. Przykładem jest prezentacja Google Slides.

• Film z konkretnym pytaniem. Dodaj film YouTube i poproś o określenie głównej idei, wyjaśnienie pokazanej techniki lub zastosowanie jej w praktyce.

• Interaktywne ćwiczenie. W kursie językowym mogą to być fiszki lub ćwiczenie gramatyki. Poniższy zrzut ekranu pokazuje przykład ćwiczenia Wordwall w edytorze WeStudy.

• Formularz informacji zwrotnej. Osadzona ankieta Google Forms pomoże zebrać pytania przed zajęciami lub wrażenia po module. Odpowiedzi są przetwarzane zgodnie z zasadami zewnętrznej usługi.

• Tabela, kalendarz lub mapa. Pokaż dane do analizy, harmonogram konsultacji lub miejsce zajęć praktycznych, jeśli usługa pozwala na osadzanie.

Przejrzyj katalog integracji iFrame i instrukcje dla usług →

Warunki dostępu i możliwość osadzania różnią się między usługami i planami. Obecność linku do zasobu nie oznacza jeszcze, że można wyświetlić go przez iframe.

Jak dodać iframe w WeStudy

1. Otwórz potrzebny kurs i przejdź do edycji jego treści. W odpowiednim module dodaj nowy materiał.

2. W menu wybierz sekcję iFrame i integracje, a w niej — iFrame.

3. Uzupełnij nazwę, krótki opis i obraz materiału. Nazwa powinna wyjaśniać czynność edukacyjną: na przykład „Przećwicz czasy gramatyczne” zamiast „Zewnętrzny zasób”.

4. W usłudze, w której stworzono treść, znajdź polecenie osadzania: Embed, „Osadź” lub odpowiednią opcję w menu udostępniania. Skopiuj pełny kod HTML iframe.

5. W ustawieniach materiału WeStudy otwórz sekcję iFrame i wklej kod do pola na kod HTML elementu iframe.

6. Skorzystaj z podglądu: sprawdź ładowanie, przyciski i wygodę pracy. Skonfiguruj realizację i ocenianie, jeśli są potrzebne, i zapisz materiał. Udostępniaj go uczestnikom po sprawdzeniu.

Tak wygląda wybór materiału iFrame w edytorze kursu WeStudy. Zrzut ekranu z bazy wiedzy platformy.

Otwórz instrukcję krok po kroku ze zrzutami ekranu →

Link i kod osadzania to różne rzeczy

Adres strony z prezentacją lub ćwiczeniem nie zawsze nadaje się do iframe. Usługa może tworzyć specjalny adres do osadzania i dodawać potrzebne parametry. Dlatego najpewniejszy początek to gotowy kod z jej menu Embed, a nie samodzielne przekształcanie zwykłego linku.

W kodzie src wskazuje adres materiału, a title krótko opisuje jego przeznaczenie. Wymiary określają obszar wyświetlania. Nie zmieniaj na chybił trafił parametrów technicznych gotowego kodu: mogą od nich zależeć przyciski, tryb pełnoekranowy i zachowanie osadzonej usługi.

Przykład: interaktywne ćwiczenie w kursie językowym

Po wyjaśnieniu Present Perfect zaproponuj uczestnikom krótkie ćwiczenie z fiszkami. Dodaj je jako materiał iFrame i sformułuj zadanie: ułożyć pięć zdań, wyjaśnić wybór czasu i zanotować jeden trudny przypadek. W ten sposób zewnętrzna interaktywność służy konkretnemu wynikowi lekcji.

Rzeczywisty przykład z bazy wiedzy WeStudy: ćwiczenie wyświetla się w środkowej części edytora, a kod osadzania — w panelu ustawień po prawej.

Aby ocenić wynik uczenia się, można uzupełnić ćwiczenie osobnym zadaniem w kursie: poprosić o przesłanie zdań lub wyjaśnienia. Wtedy prowadzący widzi, jak uczestnik zastosował materiał, a nie tylko to, że otworzył stronę.

Czy iframe przekazuje oceny i postęp

Samo osadzenie nie oznacza automatycznej wymiany ocen. W WeStudy materiał iFrame ma ustawienia nauki i oceniania: sposób oceny realizacji, punkty XP, udział w rankingu i obowiązkowość przy ukończeniu kursu. Nie gwarantuje to jednak, że wynik testu z zewnętrznej usługi automatycznie trafi do raportów LMS.

Jeśli potrzebujesz odpowiedzi, liczby prób lub końcowej liczby punktów, wcześniej sprawdź sposób ich uzyskania. Do pracy kontrolnej wybierz narzędzie z potwierdzoną ewidencją wyników lub przewidź osobną weryfikację przez prowadzącego. Iframe warto wykorzystywać jako część scenariusza edukacyjnego, nie przypisując mu możliwości pełnej integracji.

Dlaczego osadzony materiał może się nie otwierać

• Zabronione osadzanie. Właściciel strony może blokować wyświetlanie w innych domenach przez X-Frame-Options lub Content-Security-Policy. Potrzebny jest dozwolony sposób osadzania od samej usługi.

• Nieprawidłowe uprawnienia dostępu. Prowadzącemu zasób się otwiera, ponieważ jest zalogowany na swoim koncie, a uczestnik widzi prośbę o pozwolenie. Sprawdź dostęp z roli uczestnika.

• Skopiowano zwykły link. Wróć do menu osadzania i sprawdź kompletność kodu.

• Niewygodny rozmiar. Zbyt niski obszar lub nieresponsywny materiał zewnętrzny mogą utrudniać pracę z telefonu. Sprawdź cały scenariusz, a nie tylko pierwszy ekran.

Jeśli usługa nie pozwala na iframe, pozostaw zrozumiały bezpośredni link i wyjaśnij, co uczestnik ma zrobić po przejściu. To także przydatna ścieżka zastępcza w razie chwilowej awarii.

Jak uczynić iframe przydatną częścią lekcji

• Dodaj przed materiałem krótką instrukcję: cel, oczekiwaną czynność i orientacyjny czas.

• Sprawdź dostęp jako uczestnik, w tym bez zalogowania na swoje osobiste konto w zewnętrznej usłudze.

• Otwórz materiał na telefonie: tekst, przyciski i pola muszą pozostać wygodne.

• Z wyprzedzeniem określ, jak uczestnik potwierdzi wykonanie i gdzie prowadzący zobaczy wynik.

• Używaj materiałów, które masz prawo rozpowszechniać, i nie ujawniaj zbędnych danych osobowych w celu osadzania.

Zacznij od jednego zasobu, który już pomaga twoim uczestnikom: prezentacji, filmu lub ćwiczenia. Dodaj go do odpowiedniego modułu WeStudy, sprawdź ścieżkę uczestnika i powiąż z zadaniem praktycznym. Wtedy iframe pomoże zbudować wartościową lekcję z gotowych narzędzi.

Znajdź instrukcję dla swojej usługi w katalogu WeStudy →

Źródła

WeStudy: katalog integracji iFrame

WeStudy: jak dodać iFrame do kursu

MDN: element HTML iframe

MDN: ograniczenie osadzania X-Frame-Options