Merge pull request #106 from eduardconstantin/feat/remove-image-question

Feat/remove image question

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing Guidelines
 
-First off, thank you for considering contributing to Azure Fundamentals Exam Questions.
+First off, thank you for considering contributing to Azure Cloud Exams.
 
 It's people like you that make this project such a great tool.
 
@@ -10,7 +10,7 @@ Thank you for taking the time to open an issue.
 
 Before opening an issue, please be sure that your issue hasn't already been asked by someone.
 
-To begin  go to issues tab, select one of the templates and follow the instructions.
+To begin go to issues tab, select one of the templates and follow the instructions.
 <br><br>
 
 When creating issues, keep these key points in mind:
@@ -19,9 +19,10 @@ When creating issues, keep these key points in mind:
 - A thorough description of the issue, (one word descriptions are very hard to understand)
 - Screenshots (if appropriate)
 - Links (if appropriate)
-<br><br>
-  
+  <br><br>
+
 # TLTR: Create a Pull Request
+
 1. Fork this repository.
 2. Clone your new repository to your system.
 3. Switch to dev branch.
@@ -50,15 +51,15 @@ Now clone the forked repository to your machine. Go to your GitHub account, open
 Open a terminal and run the following git command:
 
 ```
-git clone https://github.com/eduardconstantin/azure-fundamentals.git
+git clone https://github.com/eduardconstantin/azure-cloud-exams.git
 ```
 
 ## Create a branch
 
 Change to the repository directory on your computer (if you are not already there):
 
 ```
-cd azure-fundamentals
+cd azure-cloud-exams
 ```
 
 Make sure you are on the `dev` branch by running the command :

README.md

@@ -6,7 +6,7 @@ This is a web application built with Next.js, TypeScript, CosmosDB, GraphQL and
 that tests your knowledge of Azure fundamentals, specifically for the AZ-900 certification exam. The questions are
 stored in a Cosmos DB database and retrieved using GraphQL queries. The application is deployed on Microsoft Azure.
 
-This project was created for learning purposes to help me understand Microsoft Azure and Cosmos DB in preparation for
+This project was created for learning purposes to help me understand Microsoft Azure and CosmosDB in preparation for
 the AZ-900 exam.
 
 UPDATE: The project is now using this
@@ -17,7 +17,7 @@ UPDATE2: The project has a new name to better fit it's purpose, now it has all a
 </div>
 
 <br />
-<img src="af.gif"/>
+<img src="ace.gif"/>
 
 <div align="center">
 <br />
@@ -33,10 +33,10 @@ UPDATE2: The project has a new name to better fit it's purpose, now it has all a
 
 ## 🌟 Features
 
-- Over 400 questions scrapped from this
-  [repo](https://github.com/Ditectrev/Microsoft-Azure-AZ-900-Microsoft-Azure-Fundamentals-Exam-Questions-Answers).
+- Question sets scrapped from this
+  [repo](https://github.com/Ditectrev?q=azure&type=all&language=&sort=).
 - Correct answer displayed for each question.
-- Vercel OG image generation used to display the questions.
+- Practice mode & Exam mode.
 
 ## 🌱 Getting Started
 

app/practice/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { gql, useQuery } from "@apollo/client";
 import type { NextPage } from "next";
 import QuizForm from "@azure-fundamentals/components/QuizForm";
@@ -32,13 +32,9 @@ const questionsQuery = gql`
 const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
   searchParams,
 }) => {
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(1);
-  const [windowWidth, setWindowWidth] = useState<number>(0);
   const { url } = searchParams;
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState<number>(1);
   const editedUrl = url.substring(0, url.lastIndexOf("/") + 1);
-  useEffect(() => {
-    setWindowWidth(window.innerWidth);
-  }, []);
 
   const { loading, error, data } = useQuery(questionQuery, {
     variables: { id: currentQuestionIndex - 1, link: url },
@@ -64,7 +60,6 @@ const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
   return (
     <div className="py-10 px-5 sm:p-10 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
       <QuizForm
-        windowWidth={windowWidth}
         isLoading={loading || questionsLoading}
         questionSet={data?.questionById}
         handleNextQuestion={handleNextQuestion}

components/QuizForm.tsx

@@ -11,7 +11,6 @@ type Props = {
   handleNextQuestion: (q: number) => void;
   currentQuestionIndex: number;
   totalQuestions: number;
-  windowWidth: number;
   link: string;
 };
 
@@ -21,7 +20,6 @@ const QuizForm: FC<Props> = ({
   handleNextQuestion,
   currentQuestionIndex,
   totalQuestions,
-  windowWidth,
   link,
 }) => {
   const { register, handleSubmit, reset } = useForm();
@@ -57,7 +55,6 @@ const QuizForm: FC<Props> = ({
 
   if (isLoading) return <p>Loading...</p>;
   const { question, options, images } = questionSet!;
-  const imgUrl: string = `/api/og?question=${question}&width=${windowWidth}`;
 
   const noOfAnswers = options.filter((el) => el.isAnswer === true).length;
   return (
@@ -147,16 +144,8 @@ const QuizForm: FC<Props> = ({
             </svg>
           </button>
         </div>
-        <Image
-          src={imgUrl}
-          alt="question"
-          width={1200}
-          height={200}
-          priority={true}
-          unoptimized
-          loading="eager"
-        />
-        {images && (
+        <p className="text-white px-12 pt-10 pb-5 select-none">{question}</p>
+        {images.length !== 0 && (
           <ul className="flex flex-row justify-center gap-2 mt-5 mb-8 select-none md:px-12 px-0">
             {images.map((image) => (
               <li

lib/graphql/repoQuestions.tsx

@@ -45,7 +45,7 @@ const scrapeQuestions = (markdownText: string) => {
   return questions;
 };
 
-export const FetchQuestions = async (link: string) => {
+export const fetchQuestions = async (link: string) => {
   try {
     const res = await fetch(link);
     if (!res.ok) {

lib/graphql/resolvers.tsx

@@ -1,4 +1,4 @@
-import { FetchQuestions } from "@azure-fundamentals/lib/graphql/repoQuestions";
+import { fetchQuestions } from "@azure-fundamentals/lib/graphql/repoQuestions";
 
 const resolvers = {
   Query: {
@@ -7,23 +7,23 @@ const resolvers = {
       { link }: { link: string },
       { dataSources }: { dataSources: any },
     ) => {
-      const response = await FetchQuestions(link);
+      const response = await fetchQuestions(link);
       return { count: response?.length };
     },
     questionById: async (
       _: unknown,
       { id, link }: { id: string; link: string },
       { dataSources }: { dataSources: any },
     ) => {
-      const response = await FetchQuestions(link);
+      const response = await fetchQuestions(link);
       return response?.filter((el: any) => el.id === id)[0];
     },
     randomQuestions: async (
       _: unknown,
       { range, link }: { range: number; link: string },
       { dataSources }: { dataSources: any },
     ) => {
-      const response = await FetchQuestions(link);
+      const response = await fetchQuestions(link);
       const shuffled = response?.sort(() => 0.5 - Math.random());
       return shuffled?.slice(0, range);
     },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "azure-fundamentals-exam",
+  "name": "azure-cloud-exams",
   "version": "0.1.0",
   "private": true,
   "engines": {